// JavaScript Video Copyright © Mouse On House, Inc.
// contain all player code in this script. just need a div for the player and this vpCreate will set everything so we can maintain the video quirks dynamically with the script.
// Tried longtail player and it had too many quirks.  It had to be visible when its loaded to play.  Have work arounds but its ugly and unreliable.  Now using flowplayer.  No work arounds needed and the video playback
// is way smoother.
// Instead of messing around with the position of the player we decided to change the image position.  If the player is absolute, it has problems displaying if not visible on load.  e.g. 2nd floor has a default video to play.  if you have to scroll to it, it wont be playing.
// cant get firefox to center the player in the show img div.
// We can not use param.wmode = 'transparent' or Param.wmode = 'opaque'.  it makes the playback jittery.  the only reason we need this is to not have the smaller video show throught the ShowImg div.  So when the shoImg div is visible we wont play the small vidoes becuase they will show through
// and more than one video can hurt performance.
// string testing:
// perform on ie and ff, and with flash installed and not installed.
// test on FloorPlan: large and small image, exterior (album) large and small, player visible and not visible (resize and go back to exterior tab) then scroll down.  have to have the player at the bottom or not visible. Showimg clicks.


// flowplayer 3.2 does not work if we destroy the video player going from floor plan to say exterior.  the player cant have its div lost/replaced.  Subsequent calls will cause an error.  Looked into unloading the video but could only get it to work
// if the div has contents.  And the only way to get the video to "unload" is if the user clicks on the splash contents.  So decided not to destroy the players and create them as needed.  Since the hide works we will just hide them and when we show the video
// just set the x,y of the player.  Player has to be absolute because the image and player cant exist in the same location.  The actually might be able to if the image w/h was set to zero when the player was displayed, but we cant lose the player's container div.
// if more than one player gets introduced to the page and the first player is not there, we get an error so we have to keep the player around but hidden.



var aobjPlayer = []; // array of players

function objPlayer(lId, lPlayer) {
    var sPrefix = '';
    switch (lPlayer) {
        case enPlayer.FloorPlan: sPrefix = 'FP'; break;
        case enPlayer.ShowImg: sPrefix = 'SI'; break;
        case enPlayer.AlbumExterior: sPrefix = 'AE'; break;
        case enPlayer.AlbumInterior: sPrefix = 'AI'; break;
        default: sPrefix = "?";
    } // switch
    this.lId = lId;
    this.sId = 'v' + sPrefix + String(lId);
    this.sCId = 'vc' + sPrefix + String(lId);
    this.lPlayer = lPlayer;
} // objPlayer

//function objPlayerDestroy() {
//}
//function objPlayerDestroy() {
//    for (i = 0; i < aobjPlayer.length; i++) {
//        //vpHide(aobjPlayer[i].lId)
////        alert(aobjPlayer[i].sId)
//        flowplayer(aobjPlayer[i].sId).stop();
//        //flowplayer(aobjPlayer[i].sId).hide();
//        //flowplayer(aobjPlayer[i].sId).unload();
////        alert(document.getElementById('vc' + String(aobjPlayer[i].lId)).innerHTML)
////        document.getElementById('vc' + String(aobjPlayer[i].lId)).innerHTML = "";
//    }
//    //aobjPlayer = [];
//} // objPlayerDestroy

// pass the player id your looking for and it returns the array index
// -1 if not found
// did allocate the array based on the lId passed but could run into a problem of memory allocation or array maximum size
function lobjPlayer(lId, lPlayer) {

    for (i = 0; i < aobjPlayer.length; i++) {
        if (aobjPlayer[i].lId == lId && aobjPlayer[i].lPlayer == lPlayer) return i;
    } // for
    return -1;

} // lobjPlayer

function vpCreate(lId, lPlayer, sVideo, bMute) {

    //alert(lId + ' ' + lPlayer + ' ' + document.getElementById('vc' + String(lId)).innerHTML);
    //alert(lId + ' ' + lPlayer);
    //if (lId == undefined || lPlayer == undefined || !document.getElementById('vc' + String(lId))) return false;
    if (lId == undefined || lPlayer == undefined) return false;
    var sId;
    var lW, lH, lPlayerIndex, sClass = 'VFPT_Video';
    var Param = {}, clip = {}, plugins = {}, play = {}, controls = {}
    plugins.controls = controls
    //clip.url = 'http://192.168.1.111/Property/272/8/Image/MOV016.mp4';
    clip.autoPlay = true;
    clip.autoBuffering = true;
    controls.fullscreen = false;

    lPlayerIndex = lobjPlayer(lId, lPlayer);
    //alert(lPlayerIndex);
    if (lPlayerIndex == -1) { // add new player?
        lPlayerIndex = aobjPlayer.length;
        aobjPlayer[lPlayerIndex] = new objPlayer(lId, lPlayer);
    } // lPlayerIndex == -1

    if (!document.getElementById(aobjPlayer[lPlayerIndex].sCId)) return false;

    sId = aobjPlayer[lPlayerIndex].sId;
    aobjPlayer[lPlayerIndex].sVideo = sVideo;
    
    if (lPlayer == enPlayer.ShowImg) {
        lW = 600
    } // lPlayer == enPlayer.ShowImg
    else if (lPlayer == enPlayer.AlbumExterior || lPlayer == enPlayer.AlbumInterior) {
        lW = 275
        clip.autoPlay = false;
        Param.wmode = 'transparent'
    } // else if (lPlayer == enPlayer.AlbumExterior || lPlayer == enPlayer.AlbumInterior)
    else if (lPlayer == enPlayer.FloorPlan) {
        if (!document.getElementById("VFPT_FP_Image_TD" + String(lId))) return false;
        if (document.getElementById('bLargeImage')) if (document.getElementById('bLargeImage').value == 0) Param.wmode = 'transparent'
        //plugins.controls = null; // no controls
        controls.play = false;
        controls.scrubber = false;

       
        lW = parseInt(document.getElementById("VFPT_FP_Image_TD" + String(lId)).style.width)
        lW *= .85 // set the player just a tad smaller than the td so it doesnt force it bigger
        if (!document.getElementById("VFPT_FP_Image_TD" + String(lId))) return;
    } // lPlayer == enPlayer.ShowImg

    if (lPlayer != enPlayer.ShowImg) vpSetXY(lId, lPlayer)

    lW = parseInt(lW);
    lH = parseInt(lW / 1.33);
    //alert(lW + 'x' + lH)

     switch (lPlayer) {
        case enPlayer.FloorPlan: sClass = "_FloorPlan"; break;
        case enPlayer.ShowImg: sClass = "_ShowImg"; break;
        case enPlayer.AlbumExterior: sClass = "_AlbumExterior"; break;
        case enPlayer.AlbumInterior: sClass = "_AlbumInterior"; break;
    } // switch
      //alert(x)
    document.getElementById(aobjPlayer[lPlayerIndex].sCId).innerHTML = "<div id='" + sId +"' name='" + sId +"' class='" + sClass + "' href='/'></div>"; // the div must be empty or it will not play - and set it up from here for more control

    clip.url = ''
    if (sVideo != undefined && sVideo != '')  clip.url = sVideo;

    if (bMute)
        clip.onStart = function() { $f(sId).mute(); $f(sId).setVolume(0); }
    else
        clip.onStart = function() { $f(sId).unmute(); $f(sId).setVolume(75); }

    controls.mute = !bMute && lPlayer != enPlayer.FloorPlan;
    controls.volume = !bMute && lPlayer != enPlayer.FloorPlan;
    controls.autoHide = 'always';


    if (clip.autoPlay && clip.autoBuffering) { // when auto playing hide the play button and loop
        clip.onBegin = function() { this.getPlugin("play").css({ opacity: 0 }); }
        clip.onPause = function() { this.getPlugin("play").css({ opacity: 1 }); }
        play.opacity = 0;
        clip.onBeforeFinish = function() { return false; } // loop
    }

    //plugins.zIndex=0
    //plugins.xDisplay = 'block'

    //plugins.myContent = {}
//    plugins.onClick = function() { alert(1); return false; }

    var Config = {}
    Config.clip = clip;
    Config.plugins = plugins;
    Config.play = play;

    //Config.onMouseOver = function() { alert(1); return false; }

    // has to be named this in order for it to work... gets: Player initialization failed: TypeError: Error #1009 
    // seems ok to rename the js file just not the swf file
    //Param.src = '/include/flowplayer/flowplayer-3.1.5.swf';
    //Param.src = '/include/flowplayer/flowplayer.swf';
    //if (bTransparent) Param.wmode = 'transparent'//'opaque';
    //Param.wmode = 'transparent'
    Param.src = '/include/flowplayer/flowplayer.commercial-3.2.2.swf' // '/include/flowplayer/flowplayer.commercial-3.1.5.swf'
    Param.version = [9, 115] // required for mp4/h.264 playback - let them play it without forcing them to 10 [10,0]
    Param.width = lW;
    Param.height = lH;
    Param.allowfullscreen = false;
    
    //clip.width? scale = fit?
    
    Config.key = '#$afce2bed823185aeaac' //'#$05d56146dc103390b2a'
    Config.contextMenu = ["Mouse On House, Inc. - Video Player - Copyright"];

    //vars.author = "Mouse On House, Inc."
    //vars.abouttext = "Mouse On House, Inc. - Copyright"
    //vars.aboutlink = "http://www.MouseOnHouse.com"
    //alert(sId + ' ' + clip.url);
    //alert(lP);
    //alert(document.getElementById(sId).innerHTML);
    document.getElementById(sId).innerHTML = ''; // has to be cleared to create a player
    //if (document.getElementById(sId).innerHTML == '') flowplayer(sId, Param, Config);
    flowplayer(sId, Param, Config);
    if (document.getElementById('VFPT_FP_Image' + String(lId))) document.getElementById('VFPT_FP_Image' + String(lId)).style.visibility = 'hidden'; // cc
    //alert(sId + ' ' + flowplayer(sId).getClip());
    //if (sVideo == undefined && sVideo == '')  vpHide(lId);
    //works flowplayer(sId, { src: '/include/flowplayer/flowplayer-3.1.5.swf', wmode: 'opaque' }, { clip: { url: s, onBeforeLoad: function() { }, onStart: function() { $f().mute(); }, autoPlay: false, autoBuffering: true, onBegin: function() { this.getPlugin("play").css({ opacity: 0 }); }, onPause: function() { this.getPlugin("play").css({ opacity: 1 }); }, onResume: function() { }, onBeforeFinish: function() { return false; } }, plugins: { controls: null }, play: { opacity: 0 }, wmode: 'opaque' });

} // vpCreate

function vpExist(lId, lPlayer, bFlowplayer) {
    var lP = lobjPlayer(lId, lPlayer); if (lP == -1) return false;
    if (bFlowplayer)
       return document.getElementById(aobjPlayer[lP].sCId) && flowplayer(aobjPlayer[lP].sId)
    else
        return document.getElementById(aobjPlayer[lP].sCId)
} // vpExist

function vpHide(lId, lPlayer) {

    // always show the image in case there is a player error
    if (document.getElementById('VFPT_FP_Image' + String(lId))) document.getElementById('VFPT_FP_Image' + String(lId)).style.visibility = 'visible'; // cc

    //alert(lId);
    //if (!vpExist(lId, true)) return;   

   // try { // in case the player is not available - fp, show video, exterior, back to fp and mouse over non video - play large image on album, while playing click floor plan tab causes error
    //if (!vpExist(lId, lPlayer, true)) {
    if (vpExist(lId, lPlayer, true)) {
            var lP = lobjPlayer(lId, lPlayer);
            if (flowplayer(aobjPlayer[lP].sId)) {
                flowplayer(aobjPlayer[lP].sId).stop();
                document.getElementById(aobjPlayer[lP].sCId).style.visibility = 'hidden'; // dont use flowplayer('v' + String(lId)).hide(); - rapid mouse movement will not hide the player because the video hasnt started yet
            } // flowplayer
        } //vpExist
    //}
   // catch (e) {
        //alert('vpHide: ' + e.name + ' - ' + e.message);
  //  } // try


} // vpHide

function vpPlay(lId, lPlayer, sVideo, bMute) {

    //alert(lId + ' - ' + sVideo)
    vpCreate(lId, lPlayer, sVideo, bMute);
    var lP = lobjPlayer(lId, lPlayer); if (lP == -1) return false;

    if (vpExist(lId, lPlayer, false)) document.getElementById(aobjPlayer[lP].sCId).style.visibility = 'visible';
    if (document.getElementById('VFPT_FP_Image' + String(lId))) document.getElementById('VFPT_FP_Image' + String(lId)).style.visibility = 'hidden'; // cc

} // vPlay

function vpPauseAll() {
    for (i = 0; i < aobjPlayer.length; i++) {
        if (flowplayer(aobjPlayer[i].sId)) {
            flowplayer(aobjPlayer[i].sId).pause(); 
        } //flowplayer(aobjPlayer[i].sId
    } // for
} // vpPauseAll

function vpHideAll() {
    for (i = 0; i < aobjPlayer.length; i++) {
        if (flowplayer(aobjPlayer[i].sId)) {
            flowplayer(aobjPlayer[i].sId).stop();
            flowplayer(aobjPlayer[i].sId).hide();
        } //flowplayer(aobjPlayer[i].sId
    } // for
} // vpPauseAll

//function vpPause(lId) {
//    //alert('play ' + lId + ' ' + aobjPlayer[lId].bReady);
//    if (!vpExist(lId, true)) return;
//    var lPlayerIndex = lobjPlayer(lId); if (lPlayerIndex == -1) return;
//    flowplayer(aobjPlayer[lPlayerIndex].sId).pause();  
//} // vpPause

// set the player xy since its position:absolute.  we want to give the caller the convenience of refering to the player with just an ID#.  We can do this but since we are keeping all the players around we need to pass the 
// player type.  e.g. we give the players in albums a sequential number.  the only way we can identify player 1 on the exterior page verse player 1 on interior page is by telling us its exterior or interior.
function vpSetXY(lId, lPlayer) {

    var sId = '', lLeft = 6;  lTop = 12;
    switch (lPlayer) {
        case enPlayer.FloorPlan: sId = 'VFPT_FP_Image' + String(lId); lLeft = 2; lTop = 2; break;
        case enPlayer.AlbumExterior: sId = 'VFPT_AE_Image' + String(lId); break;
        case enPlayer.AlbumInterior: sId = 'VFPT_AI_Image' + String(lId); break;
        case enPlayer.ShowImg: sId = 'VFPT_ShowImg'; break;
        default: return;
    } // switch
    if (!document.getElementById(sId)) return false;
    ElementLeftTop(sId);
    
    var lP = lobjPlayer(lId, lPlayer); if (lP == -1) return false;
    document.getElementById(aobjPlayer[lP].sCId).style.left = lElementLeft + lLeft;
    document.getElementById(aobjPlayer[lP].sCId).style.top = lElementTop + lTop;
//    document.getElementById("VFPT_ShowImg_Label").innerHTML = document.getElementById("VFPT_ShowImg").style.left + ' x ' + document.getElementById("VFPT_ShowImg").style.top
//    document.getElementById("VFPT_ShowImg_Desc").innerHTML = document.getElementById(aobjPlayer[lP].sCId).style.left + ' x ' + document.getElementById(aobjPlayer[lP].sCId).style.top
    
} // vpSetXY

var lElementLeft = 0, lElementTop = 0;
function ElementLeftTop(Id) {
    lElementLeft = 0;
    lElementTop = 0;
    var Element
    if (!document.getElementById(Id)) return;
    Element = document.getElementById(Id)
    lElementLeft = Element.offsetLeft
    lElementTop = Element.offsetTop;
    while (Element.offsetParent) {
        Element = Element.offsetParent;
        lElementLeft += Element.offsetLeft;
        lElementTop += Element.offsetTop;
    } // while
} // ElementLeftTop()" & vbCr

function vpOnResize() {
    for (i = 0; i < aobjPlayer.length; i++) {
        vpSetXY(aobjPlayer[i].lId, aobjPlayer[i].lPlayer);
    } // for
} // vpOnResize