/*
homepage_routines.js
JS and Jquery Homepage Rountines

Created: 07.20.10 - VS
Edited: 09.07.10 - design tweaks
Edited: 09.15.10 - more design changes.
Edited: 20100922 - RLC : changed opacity from 70% to 60%
Edited: 20100923 - RLC : added event dispatch onVisible (defined by rm_openx_data.js as EVENT_ON_VISIBLE)
Edited: 10.15.10 - added code for video on the homepage
Edited: 11.29.10 - added openPanel toggle code
Edited: 12.09.10 - moved the DopDownList's parent parent div to a higher Z index... (tweaked the search/dropdown z order)


*/

var panelIsOpen = false;
var currentOpenPanel = "none";
var currentOpenNumber = 0;
var numberOfBillboards = 0;
var currentBB = 0;
var isPausedRot = false;
var closeIcon = 0;
var RTLtoggle = false;
var moviePause = false;






function pauseRot() {
    isPausedRot = true;
}

function unPauseRot() {
    isPausedRot = false;
}

//only called by the interval



function rotateTheBB() {
    if (!panelIsOpen && !isPausedRot && !moviePause) {
		
		//alert(inLinePlayerControls.isInlinePlaying);
		
		
        nextBB = currentBB + 1;
        if (nextBB >= numberOfBillboards) {
            nextBB = 0;
        }
		
        /*$("#bb_" + currentBB).css({'z-index' : '10'});
		$("#bb_" + nextBB).css({'z-index' : '9', 'display' : 'block'});
		$("#bb_" + currentBB).fadeOut(400);
		
		highlightIcon(nextBB + 1);
		unhighlightIcon(currentBB + 1);
		
		currentBB = nextBB;*/
		
        rotation(currentBB, nextBB);
    }
}

//called by rotateTheBB and iconOver
function rotation(cur, next) {
    $("#bb_" + cur).css({
        'z-index' : '10'
    });
    $("#bb_" + next).css({
        'z-index' : '9',
        'display' : 'block'
    });
    $("#bb_" + cur).fadeOut(400);
	
    highlightIcon(next + 1);
    unhighlightIcon(cur + 1);
	
    currentBB = next;

    //20100923 - RLC - added a dispatch to visible
	///alert(typeof(EVENT_ON_VISIBLE));
    if(typeof(EVENT_ON_VISIBLE) != 'undefined') {
        $('#bb_' + currentBB).trigger(EVENT_ON_VISIBLE);
    }
}



function panelHoverIn () {
    if (!panelIsOpen) {
        $(this).find("#panel").stop().animate({
            top: '-30'
        }, 200);
    }
}


function panelHoverOut () {
    if (!panelIsOpen) {
        $(this).find("#panel").stop().animate({
            top: '0px'
        }, 200);
    }
}


function panelClick() {
    currentOpenPanel = $(this).attr('id');
	
	//Check to see if it's the YELLOW ONLY bar
	if (currentOpenPanel == 'expandPanel') {
		currentOpenPanel = $(this).parent().attr('id');
		onlyYellow = true;
	} else {
		onlyYellow = false;	
	}
	
    currentOpenNumber = parseInt(currentOpenPanel.substring(currentOpenPanel.length - 1));
    panelIsOpen = true;
	
	if (onlyYellow) {
		$(this).parent().find("#panel").find('#content').fadeOut(200, expandPanel);
	} else {
    	$(this).find("#panel").find('#content').fadeOut(200, expandPanel);
	}
}


function expandPanel() {
    //Get the TOP/LEFT:
    var p = $("#" + currentOpenPanel).find("#panel");
    var position = p.offset();
    eT = position.top;
    eL = position.left;
	
	
    //Expand This: ' + currentOpenPanel + '
    ePanel = '<div id="ePanel"></div>';
    ePanel += '<style type="text/css">';
    ePanel += '#ePanel {position:absolute; display:visible;z-index:55;background-color: #FFFFFF; width:229px; height:147px; left:' + eL + 'px; top:' + eT + 'px;overflow:hidden}';
    ePanel += '</style>';
    $ePanelObj = $(ePanel).prependTo( $('body') );
    //This left CSS is required to fix IE's issues:
    $("#ePanel").css({
        'left' : eL + 'px'
        });
	
	
    if (currentOpenNumber < 3) {
        eL2 = eL;
        $("#ePanel").animate({
            width: 466,
            height: 455,
            top: 92
        }, 300, makeBlack);
    } else {
        eL2 = eL - 237;
        $("#ePanel").animate({
            width: 466,
            height: 455,
            top: 92,
            left: eL2
        }, 300, makeBlack);
    }
	
}


function makeBlack() {
	
    blackDiv = '<div id="blackDiv"></div>';
    blackDiv += '<style type="text/css">';
    blackDiv += '#blackDiv {position:absolute; display:visible;z-index:54;background-color: #333333; width:466px; height:457px; top:90px; left:' + eL2 + 'px;opacity:0.6;filter:alpha(opacity=60);cursor: pointer;}';
    blackDiv += '</style>';
	
    $blackObj = $(blackDiv).prependTo( $('BODY') );
	
    var browserWidth = ($(window).width() > $(document).width()) ? $(window).width() : $(document).width(); //If the window is smaller, use the document size.
    var browserHeight = ($(window).height() > $(document).height()) ? $(window).height() : $(document).height();

    $("#blackDiv").animate({
        width: browserWidth,
        height: browserHeight,
        top: 0,
        left: 0
    }, 200, placeEpanel); //, placeEpanel
    $("#blackDiv").click(closeExpanded);
}






function placeEpanel() {
    eHTML = '<div id="ePanelData">';
	
    eHTML += '<div id="closeButton" class="closeBut"><a href="" onclick="closeExpanded(); return false;"><img id="icon" src="/global/images/rm_images/rm_closeButton.gif" border="0" /></a></div>';
	
    eHTML += '<div id="ePanelContent" class="theContent">';
    eHTML += $("#panel_" + currentOpenNumber).html();
    eHTML += '</div>';
	
    eHTML += '</div>';
    eHTML += '<style type="text/css">';
    eHTML += '#ePanelData {overflow: hidden; width: 466px; height: 455px;}';
    eHTML += '</style>';

    $("#ePanel").html(eHTML);
	
//$("#ePanel").fadeTo(1, 500);
//$("#ePanel").animate({opacity: 1.0}, 300);
	
//Get Class from DIV:
//theClass = $("#panel_" + currentOpenNumber + " div").attr('class');
//Class is still not being applied for some reason.
//$("#ePanel").addClass(theClass);
	
}



function closeExpanded() {
    $('#ePanelData').remove();
    $("#blackDiv").animate({
        width: 466,
        height: 455,
        top: 92,
        left:eL2
    }, 200, removeEpanel);
}

function removeEpanel() {
    $('#blackDiv').remove();
    $("#ePanel").animate({
        width: 229,
        height: 147,
        top: eT,
        left: eL
    }, 200, resetPanels);
}

function resetPanels() {
    $('#ePanel').remove();
    $("#" + currentOpenPanel).find("#panel").animate({
        top: '0px'
    }, 200);
    $("#" + currentOpenPanel).find("#panel").find('#content').fadeIn(200);
    panelIsOpen = false;
    currentOpenNumber = 0;
}

function highlightIcon(iconID) {
    $("#icon_" + iconID).find("#iconWhite").css({
        "visibility" : "hidden"
    });
    $("#icon_" + iconID).find("#iconBG").stop().animate({
        top: '-8px'
    }, 400);
    closeIcon = iconID;
}

function unhighlightIcon(iconID) {
    $("#icon_" + iconID).find("#iconWhite").css({
        "visibility" : "visible"
    });
    $("#icon_" + iconID).find("#iconBG").stop().animate({
        top: '0px'
    }, 400);
}


function iconOver() {
    isPausedRot = true;
    myName = $(this).attr('id');
    myNumber = parseInt(myName.substring(myName.length - 1));
	
    if (myNumber - 1 != currentBB) {
        rotation(currentBB, myNumber-1);
    }
}


function windowResized() {
	
    var browserWidth = $(window).width();
    var browserHeight = $(window).height();
	
    if (panelIsOpen) {
        //Resize Black
        $("#blackDiv").css({
            "width" : browserWidth + "px",
            "height" : browserHeight + "px"
            });
		
        var p = $("#" + currentOpenPanel).find("#panel");
        var position = p.offset();
        newL = position.left;
		
        if (currentOpenNumber < 3) {
        //do nothing
        } else {
            newL = newL - 237;
        }
		
        $("#ePanel").css({
            "left" : newL + "px"
            });
    }
	
}


