/*
homepage_routines.js
CHANDAN
*/

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 setUp() {


	runAfter = arguments[0];

    //Get Direction:
    theDir = $('#homepage').attr('direction');
    if (theDir == "RTL") {
        RTLtoggle = true;
    }


    //Make Panel Over/Out states (hover);
    $('.singlePanelDiv').hover(panelHoverIn, panelHoverOut);

    //Place Yellow Plus:
    originalHTML = $('.expandYellow').html();
    if (RTLtoggle) {
        NewHTML = '<p class="expandText" style="margin-left:5px"><img src="/global/images/rm_images/expandPlus.png" hspace="5" align="left" alt="" />' + originalHTML + '</p>'
    } else {
        NewHTML = '<p class="expandText"><img src="/global/images/rm_images/expandPlus.png" hspace="5" align="right" alt="" />' + originalHTML + '</p>'
    }
    $('.expandYellow').html(NewHTML);
    $('.expandYellow').addClass('unselectable');
    $('.expandYellow').onselectstart = function() {
        return(false);
    };
	
	
	//Check for openPanel toggle, and then set either the whole panel or the yellow panel to be clickable.
	$('.singlePanelDiv #panel #content a').each(function(index) {
		
		openPanelToggle = $(this).attr('openPanel'); 
		if (openPanelToggle == 'false') {
			$(this).parent().parent().parent().parent().find('#expandPanel').click(panelClick);
		} else {
			$(this).parent().parent().parent().parent().click(panelClick);
		}
		
	});
	
	
	
    //Get the BillBoard Speed:
    var bbSpeed = $('#billboards').attr('intervalTime');
	
    //Get the BillBoard Count
    //numberOfBillboards = $('#billboards a').size();
   // zCount = numberOfBillboards;
   
   numberOfBillboards = $('#billboards').children().size();
   zCount = numberOfBillboards;
    aCount = 1;
	
	
	//reWrite the BB area...
    newBBhtml = "";
	e = 0;	
	$('#billboards').children().each(function(index) {
		xContent = $(this).html();
		xHref = $(this).attr('href'); 
		xTarget = $(this).attr('target'); 
		if (xHref) {
			tString = '<div id="bb_' + e + '" style="z-index:' + zCount + '" class="singleBB"><a href="' + xHref + '" target="' + xTarget + '">' + xContent + '</a></div>';
		} else {
			//alert(xContent);
			tString ='<div id="bb_' + e + '" style="z-index:' + zCount + '" class="singleBB">' + xContent + '</div>';
		}
		
		newBBhtml += tString;
		e++;
		zCount--;
  	});

    
    /*bbArray = $('#billboards').html().split('</a>');
    if (bbArray.length < 2) {
        //IE Fix... looking for '</A>' - case sensitive
        bbArray = $('#billboards').html().split('</A>');
    }
    for (e=0; e<bbArray.length-1; e++) {
        tString = '<div id="bb_' + e + '" style="z-index:' + zCount + '" class="singleBB">' + $.trim(bbArray[e]) + '</a></div>';
        newBBhtml += tString;
        zCount--;
    }*/
	
    $('#billboards').html(newBBhtml);
    $('#billboards').hover(pauseRot, unPauseRot);
	
	
    //reWrite the BB Icons:
    newIconHTML = "";
    iconArray = new Array();
    aCount = 1;
	
    //<img id="icon" src="images/0025x0025_SAPPHIRE_NOW_Frankfurt_2010_0397.jpg" alt="SAP Influencer Summit 2009" border="0"/>
    $.each($('#bbIcons img'), function() {
        oneIconHTML = '<div id="icon_' + aCount + '" class="iconMainClass">';
			
        oneIconHTML += '<div id="iconBG" class="iconBGstyle">';
		
        oneIconHTML += '<div id="theIcon" class="iconStyle">';
        oneIconHTML += '<img id="icon" src="' + $(this).attr("src") + '" alt="' + $(this).attr("alt") + '" border="0"/>';
        oneIconHTML += '</div>';
		
        oneIconHTML += '<div id="iconWhite" class="iconWhiteStyle">';
        oneIconHTML += '</div>';
		
        oneIconHTML += '</div>';
		
        oneIconHTML += '<div id="iconYellow" class="iconYellowstyle">';
        oneIconHTML += '<img id="icon" src="/global/images/rm_images/iconYellow.png" border="0" />';
        oneIconHTML += '</div>';
		
		
        oneIconHTML += '</div>';
		
		
        newIconHTML += oneIconHTML;
        //The array is for RTL
        iconArray.push(oneIconHTML);
        aCount++;
    });

    $('#bbIcons').remove();
		
	
    var newSearchHTML = $('<div>').append($('#SearchDiv').clone()).remove().html(); //This gets the html including the DIV that is it's parent
    $('#SearchDiv').remove();
	
    siHTML = '<div id="siSpace" class="searchIconSpace">';
    siHTML += '<div id="sBox" style="float:left;margin-left: 16px">' + newSearchHTML + '</div>';
    if (RTLtoggle) {
        //Icons need to be reversed for RTL
        iconArray.reverse();
        newIconHTML = "";
        for (q=0; q<iconArray.length; q++) {
            newIconHTML += iconArray[q];
        }
    }
    siHTML += '<div id="iBox" style="float:right;margin-right: 5px">' + newIconHTML + '</div>';
    siHTML += '</div>';
    $siSpace = $(siHTML).prependTo( $('#homepage') );
	

    //Fix the blue bleed on the button
    $('#SearchDiv img').css({
        'display' : 'block'
    });
	
    //Set icon button onEnter stuff
    $('.iconMainClass').mouseenter(iconOver);
	
    //Set the First Icon Active:
    highlightIcon(1);
	
    //Start BB rotation:
    bbSpeed = parseInt(bbSpeed) * 1000;
    window.setInterval(rotateTheBB, bbSpeed);
	
	
    //Adjust the moreLink space:
    $.each($('.moreClass'), function() {
	
        if (RTLtoggle) {
            newHTML = '<div id="learnMoreIcon" style="float:right;margin-left:8px;margin-right:-3px">';
            newHTML += '<img src="/global/images/RTL/YourWorkspaceIcon_RTL.gif" border="0">';
            newHTML += '</div>';
            newHTML += '<div id="learnMoreText" class="lmClass" style="color:#04357B;width:190px;text-align:right;">';
            tempHTML = $(this).html();
            newHTML += tempHTML;
            newHTML += '</div>';
        } else {
            newHTML = '<div id="learnMoreIcon" style="float:left;margin-right:8px;">';
            newHTML += '<img src="/global/images/YourWorkspaceIcon.gif" border="0">';
            newHTML += '</div>';
            newHTML += '<div id="learnMoreText" class="lmClass" style="color:#04357B;width:200px;">';
			
            
			shouldBeUnderlined = $(this).find("a").attr('openPanel'); 
			if (shouldBeUnderlined == "false") {
				tempHTML = $(this).html();
            	newHTML += tempHTML;
			} else {
				tempHTML = $(this).find("a").html();
				newHTML += '<u>' + tempHTML + '</u>'; //remove the HREF
			}
			newHTML += '</div>';
        }
		
        $(this).html(newHTML);

    });
	
	
    if (RTLtoggle) {
        $('#sBox').css({
            'float' : 'right'
        });
        $('#iBox').css({
            'float' : 'left',
            'margin-left' : '16px'
        });
		
        //$('#bbIcons').css({'left' : '-718px'});

        //Adjust Search
        inputField = $('#SearchDiv table tr td:nth-child(1)').html();
        spacer = $('#SearchDiv table tr td:nth-child(2)').html();
        searchButton  = $('#SearchDiv table tr td:nth-child(3)').html();
        newSearchHTML = '<table width="170" cellpadding="0" cellspacing="0" border="0"><tr><td>';
        newSearchHTML += searchButton;
        newSearchHTML += '</td><td>';
        newSearchHTML += spacer;
        newSearchHTML += '</td><td>';
        newSearchHTML += inputField;
        newSearchHTML += '</td></tr></table>';
        $('#SearchDiv').html(newSearchHTML);
		
        $("#SearchDiv").removeClass('Search');

        $('#SearchDiv').css({
            'margin-right' : '16px'
        });
        //sDivWidth = $('#SearchDiv').outerWidth();
		
        //Adjust bottom panels:
        $('.panelContent h3').css({
            'text-align' : 'right'
        });
        $('.panelContent').css({
            'margin-right' : '16px'
        });
        $('.expandYellow').css({
            'background-image' : 'url("/global/images/rm_images/expandYellow_RTL.png")'
        });
        $('.expandText').css({
            'text-align' : 'left'
        });
        $('.moreClass').css({
            'right' : '16px'
        });
    }
	
	

    //IE6 fixes:
    $("#singlePanel4").css({
        'margin-right' : '0px'
    });
    if ((BrowserDetect.browser == "Explorer" && BrowserDetect.version == 6)) {
        $(".iconWhiteStyle").css({
            'top' : '0px',
            "position" : "absolute"
        });
        if (RTLtoggle) {
            $('.lmClass').css({
                'width' : '160px'
            });
        } else {
            $('.lmClass').css({
                'width' : '180px'
            });
        }
    }

    //set resize function:
    $(window).resize(windowResized);
	
	
	if (runAfter){
		eval(runAfter);
	}
	
	//Set the homepage DIV's Zindex to 2 (to prevent the drop down for languages from failing to show up...)
	if ($('.DropDownList').html() !== null) {
		//Move the DopDownList's parent parent div to a higher Z index... 
		$('#homepage').css({'z-index' : '1'});
		$('#billboards').css({'z-index' : '1'});
		$('#SearchDiv').css({'z-index' : '1'});
		
		$('.DropDownList').parent().parent().css({'z-index' : '25'});
	}
}




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"
            });
    }
	
}


