var oVideos = new Videos() ;  // in Videos.sc
var oUtils = new Utils() ;    // in Utils.sc

var nArea1InnerWidth ;
var nVideoHeight ;

var oArea3MenuOptionSelected = null ;
var sArea3MenuOptionDefault = 'AboutUs' ;

var bVideoLinkClicked = false ;

// # of loads of this page since the browser was opened
var nLoadNumber = oUtils.incrCookie( 'loadNumber' ) ;

// wrote a ridiculous amount of code and some CSS (in index.css)
// to make autoplay an internal option,
// then an external option almost fully implemented,
// then decided to turn it on and leave it on
// was looking ahead to providing low res / hi res option --
// that's the one that's needed
// on the initial load, the video never autoplays -- an obvious requirement
// and the fleischmanns trailer is set to always autoplay 
// the option determines autoplay in all other situations
// the call to BinaryOption() determines the default value
// if nAutoplayPosition == 0, the default value is always used
// if nAutoplayPosition > 0, a cookie is read for the value,
// and a checkbox is displayed allowing the user to choose the value
// if nAutoplayPosition == 1, the checkbox is displayed above the play button
// when hovering over area1 (the video area) -- which is annoying
// if nAutoplayPosition == 2, the checkbox is displayed at the top of the
// video menu, which looks lousy
// problem is there's no good place on the page to permanently display the option, or even a link or button to display the option

var oAutoplay = new BinaryOption( true ) ;  // in utils.sc
var nAutoplayPosition = 0 ;   // 0, 1, 2  0=off
if ( nAutoplayPosition > 0 ) {
if ( navigator.cookieEnabled && ! BrowserDetect.lteIE6 ) {
    // 'autoplay' is the name of the cookie and id of the checkbox
    oAutoplay.id( 'autoplay', true ) ;
}}

function setArea3MenuOption( oOption, bSelect ) {
    if ( typeof oOption != 'object' ) return ;
    oOption.className = bSelect ? 'area3MenuOptionSelected' : '' ;
    var oDiv = document.getElementById( 'area3' + oOption.id ) ;
    oDiv.style.display = bSelect ? 'inline' : 'none' ;   
    if ( bSelect ) oArea3MenuOptionSelected = oOption ;
}

function area3MenuClick( oOption ) {
    setArea3MenuOption( oArea3MenuOptionSelected, false )
    setArea3MenuOption( oOption, true )
}

function setStartupArea3MenuOption() {
    var sOption = oUtils.getURLparm( "menu" ) ;
    var oOption = document.getElementById( sOption ) ;
    if ( oOption == null ) 
        oOption = document.getElementById( sArea3MenuOptionDefault ) ;
    setArea3MenuOption( oOption, true ) ;
} ;

function formatPage() {

    // This function can be used to set
    // a group of style settings that are interdependent
    // The settings are hardcoded and marked with a comment in index.css,
    // area3.css and area4.css
    // Unless one or more constants are changed,
    // this function will generate those same hardcoded values
    // To use this function, remove the next two lines
    nArea1InnerWidth = 630 ;  // global var, hardcoded in index.css
    return ;

    // I didn't know about window.getComputedStyle() when I wrote this

    var nScreenWidth = 1024 ;  // designed to fit in this screen width
    var nContainerLeftRightMargin = 2 ;
    var nContainerLeftRightBorderWidth = 2 ;
    // In case actual screen width is 1024,
    // leave room for vertical scroll bar
    // IE needed MUCH more than Firefox and Chrome
    var nRoomForVerticalScrollBar = 25 ;
    var nContainerWidth = nScreenWidth 
        - 2 * nContainerLeftRightMargin
        - 2 * nContainerLeftRightBorderWidth 
        - nRoomForVerticalScrollBar ;
    with( document.getElementById( "container1" ).style ) {
        width = nContainerWidth + "px" ;
        borderWidth = nContainerLeftRightBorderWidth + "px" ;
    }

    var nArea1Width = 650 ;
    var nArea1PaddingLeftRight = 10 ;
    // global var
    nArea1InnerWidth = nArea1Width - 2 * nArea1PaddingLeftRight ; 
    var nInteriorBorderWidth = 1 ;
    var nArea2Width = nContainerWidth - nArea1Width - nInteriorBorderWidth ;
    var nArea2PaddingRight = 10 ;
    var nArea2PaddingLeft 
        = nInteriorBorderWidth > 0 ? nArea2PaddingRight : 0 ;
    var nArea2InnerWidth = nArea2Width 
        - nArea2PaddingLeft - nArea2PaddingRight ; 
    with( document.getElementById( "area1" ).style ) {
        width = nArea1InnerWidth + "px" ;
        paddingLeft = nArea1PaddingLeftRight + "px" ;
        paddingRight = nArea1PaddingLeftRight + "px" ;
        borderRightWidth = nInteriorBorderWidth + "px" ;
    }
    with ( document.getElementById( "area2" ).style ) {
        width = nArea2InnerWidth + "px" ;
        paddingLeft = nArea2PaddingLeft + "px" ;
        paddingRight = nArea2PaddingRight + "px" ;
    }

    var nInteriorBorderWidth = 1 ;
    var nArea3Width = 
        Math.ceil( ( nContainerWidth - nInteriorBorderWidth ) / 2 ) ;
    var nArea4Width = nContainerWidth - nArea3Width - nInteriorBorderWidth ;
    with( document.getElementById( "area3" ).style ) {
        width = nArea3Width + "px" ;
        borderRightWidth = nInteriorBorderWidth + "px" ;
    }
    with ( document.getElementById( "area4" ).style ) {
        width = nArea4Width + "px" ;
    }

}

function loadArea1( sVideoName, bAutoplay, bUseSWFobject ) {
    if ( typeof bAutoplay == 'undefined' ) bAutoplay = oAutoplay.value() ;
    if ( typeof bUseSWFobject == 'undefined' ) var bUseSWFobject = true ;
    var oArea = document.getElementById( "area1" ) ;
    var oVideo = oVideos.item( sVideoName ) ;
    var sHost = oVideo.host.toLowerCase() ;
    var nWidth = oVideo.width ;
    var nHeight = oVideo.height ;
    var nHeight = Math.ceil( nArea1InnerWidth / nWidth * nHeight ) ;
    // make room for controlbars that display under the video
    if ( sHost == 'youtube' ) nHeight += 25 ;
    else if ( sHost == 'local' ) nHeight += 24 ;
    var nWidth = nArea1InnerWidth ;
    nVideoHeight = nHeight ;
    var sWidthAndHeight = 'width="' + nWidth + '"' + ' height="' + nHeight + '"'

    var sAltContent = '<table border="0" style="width:100%;"><tr>'
        + '<td align="center" valign="middle"'
        //+ ' style="height:100%;"'   // doesn't work
        + ' height="' + nHeight + '">'
        + '<h4>The Flash Player plugin is required'
        + '<br>to play the videos on this site'
        + '<br>It can be downloaded now, free of charge</h4>'
        + '<a href="http://get.adobe.com/flashplayer/" target="_blank">'
        + '<img id="getflashplayer" src="images/get_adobe_flash_player.png"'
        + ' alt="Get Flash Player"></a>'
    if ( bUseSWFobject ) 
        sAltContent +=
            '<p>Some browsers will do an express install'
            + '<br>(or inform you if the plugin has been disabled)'
            + '<br>Click'
            + ' <a href="#" onclick="loadFromServer(\'\',false,false)">'
            + '<b>here</b></a>'
            + ' to give it a try</p>'
    sAltContent += '</td></tr></table>'

    // in case video object is not created, and alternate content is shown
    oArea.style.height = nHeight + "px" ;

    var oFlashvars = {} ;
    var oParams = {} ;
    oParams.wmode = "opaque" ;
    oParams.allowfullscreen = "false" ;
    oParams.allowscriptaccess = "always" ;
    var oAttributes = {} ;

    var sFlashvars = "" ;

    if ( sHost == 'youtube' ) {
        var sURL = 'http://www.youtube.com/v/' + oVideo.id ;
        // there is no way to default to high quality, only high def - 4/24/10
        sURL += '?hl=en_US&fs=0&hd=0&showinfo=1&rel=0&disablekb=1' 
            + '&autoplay=' + ( bAutoplay ? 1 : 0 ) ;
    } else if ( sHost == 'vimeo' ) {
        var sURL = 'http://vimeo.com/moogaloop.swf?clip_id=' + oVideo.id ;
        // The fullscreen parm has been set in vimeo (settings/embedding)
        // in order to hide the fullscreen button on the player control bar
        // The value set in vimeo will override the one specified here 
        // swfobject escapes the ampersands
        sURL += '&server=vimeo.com'
            + '&hd_off=1'
            + '&show_title=1'
            + '&show_byline=0'
            + '&show_portrait=0'
            + '&color=00ADEF'
            + '&fullscreen=0' 
            + '&autoplay=' + ( bAutoplay ? 1 : 0 ) ;
    } else {  // video is local, use jwplayer
        sURL = 'video_players/jwplayer/player.swf' ;
        sFlashvars = 'file=' + '/videos/' + oVideo.id ;
        sFlashvars += '&image=' + '/videos/' + oVideo.preview  ;
        //sFlashvars += '&skin=' + '/video_players/jwplayer/skins/nacht.zip' ;
        sFlashvars += '&duration=' + oUtils.calcSeconds( oVideo.time )  ;
        sFlashvars += '&autostart=' + ( bAutoplay ? 'true' : 'false' ) ;
        oParams.flashvars = sFlashvars ;
    }

    if ( bUseSWFobject ) {

    if ( nAutoplayPosition == 1 ) {
        var nLeft = parseInt(oUtils.computedStyle('area1','paddingLeft')) ;
        nLeft += 5 ;
        var nBottom = parseInt(oUtils.computedStyle('area1','paddingBottom')) ;
        nBottom += 60 ;  // height of Vimeo player control bar + 20
        var sStyle = 'left:' + nLeft + 'px' + '; bottom:' + nBottom + 'px'
        var sAutoplayDivBgnd =
            '<div id="autoplayDiv1Bgnd" style="' + sStyle + '">'
            + '<input type="checkbox" />'
            + '<span>&nbsp;Autoplay</span></div>' ;
        sAutoplayDiv = '<div id="autoplayDiv1" style="' + sStyle + '">'
            + '<input id="' + oAutoplay.id() + '" type="checkbox"'
            + ' onclick="oAutoplay.value(this.checked);" />'
            + '<span>&nbsp;Autoplay</span></div>' ;
    } else {
        var sAutoplayDivBgnd = '' ;
        var sAutoplayDiv = '' ;
    }

    var sSWFobjectTarget = "video" ;
    oArea.innerHTML = '<div id="' + sSWFobjectTarget + '">' 
        + sAltContent + '</div>'
        + sAutoplayDivBgnd + sAutoplayDiv ;

    swfobject.embedSWF( sURL, sSWFobjectTarget, nWidth, nHeight, "1.0.0"
        , false, oFlashvars, oParams, oAttributes ) ;
    
    } else {
  
    var sParams = '<param name="allowfullscreen" value="false" />'
        + '<param name="allowscriptaccess" value="always" />' ;
    if ( sFlashvars != "" )
        sParams += '<param name="flashvars" value="' + sFlashvars + '" />' ;

    sURL = sURL.replace( /[&]/g, '&amp;' ) ;

    if( BrowserDetect.IE )
        var sObject = '<object '
            + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
            + sWidthAndHeight + '>' 
            + '<param name="movie" value="' + sURL + '" />'
            + sParams 
            + sAltContent 
            + '</object>' ;        
    else if ( 1 == 0 )   
        var sObject = '<object data="' + sURL + '"'
            + ' type="application/x-shockwave-flash"' + sWidthAndHeight + '>'
            + sParams 
            //+ sAltContent 
            + '</object>' ;
    else
        var sObject = '<embed src="' + sURL + '"'
            + ' type="application/x-shockwave-flash" allowfullscreen="false"' 
            + ' allowscriptaccess="always" ' + sWidthAndHeight
            + ( sFlashvars == "" ? "" : ' flashvars="' + sFlashvars + '"' )
            + '></embed>' ;

    oArea.innerHTML = sObject ;

    }   // endif ( bUseSWFobject )
}

function loadArea2( sSelectedVideoName ) {
    var aList = oVideos.orderedList( sSelectedVideoName ) ;
    // Next line allows embedded links in the selected video only
    // Other two options are .none and .all
    var nVideoLinksDisplay = oVideos.linksDisplay.selected ;
    var bShowRunningTimes = true ;
    if ( nAutoplayPosition == 2 ) {
        var sHTML = '<div id="autoplayDiv2">'
        + '<input id="' + oAutoplay.id() + '" type="checkbox"'
        + ' onclick="oAutoplay.value(this.checked);" />'
        + '<span>&nbsp;Autoplay</span></div>' ;
    } else
        var sHTML = '' ;
    var bIsFirst = true ;
    for ( var nIndex = 0; nIndex < aList.length; nIndex++ ) {
        var oVideo = aList[ nIndex ] ;
        if ( oVideo == null ) continue ;
        if ( ! oVideo.includeInMenu ) continue ;
        var s = '<div class="videoMenuOption' ;
        if ( bIsFirst ) s = s + ' videoMenuFirstOption' ;
        if ( nIndex == aList.length - 1 ) s = s + ' videoMenuLastOption' ;
        s += '"' ;  // close out class attr
        if ( nIndex == 0 )
            s += ' id="videoMenuOptionSelected"' ;
        else
            s += ' onclick="videoClick(\'' + oVideo.name + '\');"' ;
        s += '>'
           + '<img src="images/thumbnails/' 
           + oVideo.name + '.jpg" alt="">'
           + '<span class="videoMenuOptionTitle">' + oVideo.title
           + '<br></span>' ;
        var sDesc = oVideo.description ;
        if ( nIndex == 0 )
            sDesc = sDesc.replace(
                'videoLinkClick\(\)', 'videoLinkClick(true)' ) ;
        if ( nVideoLinksDisplay == oVideos.linksDisplay.none 
            || ( nVideoLinksDisplay == oVideos.linksDisplay.selected
                && nIndex != 0 )
        ) sDesc = oUtils.stripTags( sDesc, 'a' ) ;
        s += sDesc ;
        if ( bShowRunningTimes && oVideo.time != '' )
            s+= ' (' + oVideo.time + ')' ; 
        s += '</div>' ;
        bIsFirst = false ;
        sHTML += s ;
    }
    document.getElementById( "area2" ).innerHTML = sHTML ;
}

function sizeArea2() {
    var o1 = document.getElementById( "area1" ) ;
    var o2 = document.getElementById( "area2" ) ;
    var nDelta = parseInt( oUtils.computedStyle( o1, 'paddingTop' ) )
        + parseInt( oUtils.computedStyle( o1, 'paddingBottom' ) )
        - parseInt( oUtils.computedStyle( o2, 'paddingTop' ) )
        - parseInt( oUtils.computedStyle( o2, 'paddingBottom' ) ) ;
    document.getElementById( "area2" ).style.height 
        = nVideoHeight + nDelta + "px" ;
}

function getStartupVideo() {
    var sVideoName = oUtils.getURLparm( "video" ) ;
    var oVideo = oVideos.item( sVideoName ) ;
    if ( oVideo == null ) oVideo = oVideos.defaultVideo ;
    return oVideo ;
} ;

function loadArea1AndArea2() {
    var bAutoplay = oAutoplay.value();
    var sAutoplay = oUtils.getURLparm( "autoplay" ) ;  
    if ( nLoadNumber == 1 ) bAutoplay = false ;
    else if ( sAutoplay == "0" ) bAutoplay = false ;
    else if ( sAutoplay == "1" ) bAutoplay = true ;
    else if ( oUtils.getURLparm( "video" ) == "" ) bAutoplay = false ;
    var sSelectedVideoName = getStartupVideo().name
    var bUseSWFobject = ! ( oUtils.getURLparm( "swfobject" ) == '0' ) ;
    loadArea1( sSelectedVideoName, bAutoplay, bUseSWFobject ) ;
    loadArea2( sSelectedVideoName ) ;
    sizeArea2() ;
}

function loadFromServer( sSelectedVideoName, bAutoplay, bUseSWFobject ) {
    if ( sSelectedVideoName == "" )
        sSelectedVideoName = getStartupVideo().name ; // reload current
    var sParms = "?video=" + sSelectedVideoName ;
    if ( typeof bAutoplay != 'undefined' && bAutoplay != oAutoplay.value() )
        sParms += "&autoplay=" + ( bAutoplay ? 1 : 0 ) ;
    if ( oArea3MenuOptionSelected != null ) 
        if ( oArea3MenuOptionSelected.id != sArea3MenuOptionDefault )
            sParms += "&menu=" + oArea3MenuOptionSelected.id ;
    if ( typeof bUseSWFobject != 'undefined' ) 
        sParms += "&swfobject=" + ( bUseSWFobject ? 1 : 0 )  ;    

    window.location.href = "index.html" + sParms ;
}

function videoLinkClick( bIsSelectedVideo ) {
    // This gets called from a link embedded in a video description
    // [see Videos.js and loadArea2()]
    // The link gets the click before the containing DIV
    // We want to do something to prevent the DIV from subsequently
    // responding to the click and loading the video
    // The global variable will be read, and reset, by videoClick()
    // If the link is in the selected video (first in the list),
    // there is no onclick event in the DIV, so the variable is not set
    // The parameter is only passed from the selected video with a 
    // value of true
    if ( typeof bIsSelectedVideo == "undefinded" ) bIsSelectedVideo = false ;
    bVideoLinkClicked = ! bIsSelectedVideo  ;
}

function videoClick( sSelectedVideoName, bAutoplay ) {
    if ( typeof bAutoplay == 'undefined' ) bAutoplay = oAutoplay.value() ;
    if ( bVideoLinkClicked )
        bVideoLinkClicked = false ;
    else
        loadFromServer( sSelectedVideoName, bAutoplay ) ;
}

function onloadevent() {
    formatPage() ;
    loadArea1AndArea2() ;
    oAutoplay.initCheckbox() ; // autoplay checkbox is created in loadArea2()
    setStartupArea3MenuOption() ;
    if ( BrowserDetect.lteIE6 ) ie6hover() ;
}