/*
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


*/


var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i = 0; i < data.length; i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
    },
    dataBrowser: [
		{
		    string: navigator.userAgent,
		    subString: "Chrome",
		    identity: "Chrome"
		},
		{ string: navigator.userAgent,
		    subString: "OmniWeb",
		    versionSearch: "OmniWeb/",
		    identity: "OmniWeb"
		},
		{
		    string: navigator.vendor,
		    subString: "Apple",
		    identity: "Safari",
		    versionSearch: "Version"
		},
		{
		    prop: window.opera,
		    identity: "Opera",
		    versionSearch: "Version"
		},
		{
		    string: navigator.vendor,
		    subString: "iCab",
		    identity: "iCab"
		},
		{
		    string: navigator.vendor,
		    subString: "KDE",
		    identity: "Konqueror"
		},
		{
		    string: navigator.userAgent,
		    subString: "Firefox",
		    identity: "Firefox"
		},
		{
		    string: navigator.vendor,
		    subString: "Camino",
		    identity: "Camino"
		},
		{		// for newer Netscapes (6+)
		    string: navigator.userAgent,
		    subString: "Netscape",
		    identity: "Netscape"
		},
		{
		    string: navigator.userAgent,
		    subString: "MSIE",
		    identity: "Explorer",
		    versionSearch: "MSIE"
		},
		{
		    string: navigator.userAgent,
		    subString: "Gecko",
		    identity: "Mozilla",
		    versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
		    string: navigator.userAgent,
		    subString: "Mozilla",
		    identity: "Netscape",
		    versionSearch: "Mozilla"
		}
	],
    dataOS: [
		{
		    string: navigator.platform,
		    subString: "Win",
		    identity: "Windows"
		},
		{
		    string: navigator.platform,
		    subString: "Mac",
		    identity: "Mac"
		},
		{
		    string: navigator.userAgent,
		    subString: "iPhone",
		    identity: "iPhone/iPod"
		},
		{
		    string: navigator.platform,
		    subString: "Linux",
		    identity: "Linux"
		}
	]

};
BrowserDetect.init();


/* *********************************************************************************** 
********* Islam Elkhayat: End
**************************************************************************************/

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 = $j('#homepage').attr('direction');
    if (theDir == "RTL") {
        RTLtoggle = true;
    }


    //Make Panel Over/Out states (hover);
    $j('.singlePanelDiv').hover(panelHoverIn, panelHoverOut);

    //Place Yellow Plus:
    originalHTML = $j('.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>'
    }
    $j('.expandYellow').html(NewHTML);
    $j('.expandYellow').addClass('unselectable');
    $j('.expandYellow').onselectstart = function() {
        return(false);
    };
	
	
	//Check for openPanel toggle, and then set either the whole panel or the yellow panel to be clickable.
	$j('.singlePanelDiv #panel #content a').each(function(index) {
		
		openPanelToggle = $j(this).attr('openPanel'); 
		if (openPanelToggle == 'false') {
			$j(this).parent().parent().parent().parent().find('#expandPanel').click(panelClick);
		} else {
			$j(this).parent().parent().parent().parent().click(panelClick);
		}
		
	});
	
	
	
    //Get the BillBoard Speed:
    var bbSpeed = $j('#billboards').attr('intervalTime');
	
    //Get the BillBoard Count
    //numberOfBillboards = $j('#billboards a').size();
   // zCount = numberOfBillboards;
   
   numberOfBillboards = $j('#billboards').children().size();
   zCount = numberOfBillboards;
    aCount = 1;
	
	
	//reWrite the BB area...
    newBBhtml = "";
	e = 0;	
	$j('#billboards').children().each(function(index) {
		xContent = $j(this).html();
		xHref = $j(this).attr('href'); 
		xTarget = $j(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 = $j('#billboards').html().split('</a>');
    if (bbArray.length < 2) {
        //IE Fix... looking for '</A>' - case sensitive
        bbArray = $j('#billboards').html().split('</A>');
    }
    for (e=0; e<bbArray.length-1; e++) {
        tString = '<div id="bb_' + e + '" style="z-index:' + zCount + '" class="singleBB">' + $j.trim(bbArray[e]) + '</a></div>';
        newBBhtml += tString;
        zCount--;
    }*/
	
    $j('#billboards').html(newBBhtml);
    $j('#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"/>
    $j.each($j('#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="' + $j(this).attr("src") + '" alt="' + $j(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++;
    });

    $j('#bbIcons').remove();
		
	
    var newSearchHTML = $j('<div>').append($j('#SearchDiv').clone()).remove().html(); //This gets the html including the DIV that is it's parent
    $j('#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>';
    $jsiSpace = $j(siHTML).prependTo( $j('#homepage') );
	

    //Fix the blue bleed on the button
    $j('#SearchDiv img').css({
        'display' : 'block'
    });
	
    //Set icon button onEnter stuff
    $j('.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:
    $j.each($j('.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 = $j(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 = $j(this).find("a").attr('openPanel'); 
			if (shouldBeUnderlined == "false") {
				tempHTML = $j(this).html();
            	newHTML += tempHTML;
			} else {
				tempHTML = $j(this).find("a").html();
				newHTML += '<u>' + tempHTML + '</u>'; //remove the HREF
			}
			newHTML += '</div>';
        }
		
        $j(this).html(newHTML);

    });
	
	
    if (RTLtoggle) {
        $j('#sBox').css({
            'float' : 'right'
        });
        $j('#iBox').css({
            'float' : 'left',
            'margin-left' : '16px'
        });
		
        //$j('#bbIcons').css({'left' : '-718px'});

        //Adjust Search
        inputField = $j('#SearchDiv table tr td:nth-child(1)').html();
        spacer = $j('#SearchDiv table tr td:nth-child(2)').html();
        searchButton  = $j('#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>';
        $j('#SearchDiv').html(newSearchHTML);
		
        $j("#SearchDiv").removeClass('Search');

        $j('#SearchDiv').css({
            'margin-right' : '16px'
        });
        //sDivWidth = $j('#SearchDiv').outerWidth();
		
        //Adjust bottom panels:
        $j('.panelContent h3').css({
            'text-align' : 'right'
        });
        $j('.panelContent').css({
            'margin-right' : '16px'
        });
        $j('.expandYellow').css({
            'background-image' : 'url("/global/images/rm_images/expandYellow_RTL.png")'
        });
        $j('.expandText').css({
            'text-align' : 'left'
        });
        $j('.moreClass').css({
            'right' : '16px'
        });
    }
	
	

    //IE6 fixes:
    $j("#singlePanel4").css({
        'margin-right' : '0px'
    });
    if ((BrowserDetect.browser == "Explorer" && BrowserDetect.version == 6)) {
        $j(".iconWhiteStyle").css({
            'top' : '0px',
            "position" : "absolute"
        });
        if (RTLtoggle) {
            $j('.lmClass').css({
                'width' : '160px'
            });
        } else {
            $j('.lmClass').css({
                'width' : '180px'
            });
        }
    }

    //set resize function:
    $j(window).resize(windowResized);
	
	
	if (runAfter){
		eval(runAfter);
	}
	
}

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;
        }
		
        /*$j("#bb_" + currentBB).css({'z-index' : '10'});
		$j("#bb_" + nextBB).css({'z-index' : '9', 'display' : 'block'});
		$j("#bb_" + currentBB).fadeOut(400);
		
		highlightIcon(nextBB + 1);
		unhighlightIcon(currentBB + 1);
		
		currentBB = nextBB;*/
		
        rotation(currentBB, nextBB);
    }
}

//called by rotateTheBB and iconOver
function rotation(cur, next) {
    $j("#bb_" + cur).css({
        'z-index' : '10'
    });
    $j("#bb_" + next).css({
        'z-index' : '9',
        'display' : 'block'
    });
    $j("#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') {
        $j('#bb_' + currentBB).trigger(EVENT_ON_VISIBLE);
    }
}



function panelHoverIn () {
    if (!panelIsOpen) {
        $j(this).find("#panel").stop().animate({
            top: '-30'
        }, 200);
    }
}


function panelHoverOut () {
    if (!panelIsOpen) {
        $j(this).find("#panel").stop().animate({
            top: '0px'
        }, 200);
    }
}


function panelClick() {
    currentOpenPanel = $j(this).attr('id');
	
	//Check to see if it's the YELLOW ONLY bar
	if (currentOpenPanel == 'expandPanel') {
		currentOpenPanel = $j(this).parent().attr('id');
		onlyYellow = true;
	} else {
		onlyYellow = false;	
	}
	
    currentOpenNumber = parseInt(currentOpenPanel.substring(currentOpenPanel.length - 1));
    panelIsOpen = true;
	
	if (onlyYellow) {
		$j(this).parent().find("#panel").find('#content').fadeOut(200, expandPanel);
	} else {
    	$j(this).find("#panel").find('#content').fadeOut(200, expandPanel);
	}
}


function expandPanel() {
    //Get the TOP/LEFT:
    var p = $j("#" + 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:15;background-color: #FFFFFF; width:229px; height:147px; left:' + eL + 'px; top:' + eT + 'px;overflow:hidden}';
    ePanel += '</style>';
    $jePanelObj = $j(ePanel).prependTo( $j('body') );
    //This left CSS is required to fix IE's issues:
    $j("#ePanel").css({
        'left' : eL + 'px'
        });
	
	
    if (currentOpenNumber < 3) {
        eL2 = eL;
        $j("#ePanel").animate({
            width: 466,
            height: 455,
            top: 92
        }, 300, makeBlack);
    } else {
        eL2 = eL - 237;
        $j("#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:14;background-color: #333333; width:466px; height:457px; top:90px; left:' + eL2 + 'px;opacity:0.6;filter:alpha(opacity=60);cursor: pointer;}';
    blackDiv += '</style>';
	
    $jblackObj = $j(blackDiv).prependTo( $j('BODY') );
	
    var browserWidth = ($j(window).width() > $j(document).width()) ? $j(window).width() : $j(document).width(); //If the window is smaller, use the document size.
    var browserHeight = ($j(window).height() > $j(document).height()) ? $j(window).height() : $j(document).height();

    $j("#blackDiv").animate({
        width: browserWidth,
        height: browserHeight,
        top: 0,
        left: 0
    }, 200, placeEpanel); //, placeEpanel
    $j("#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 += $j("#panel_" + currentOpenNumber).html();
    eHTML += '</div>';
	
    eHTML += '</div>';
    eHTML += '<style type="text/css">';
    eHTML += '#ePanelData {overflow: hidden; width: 466px; height: 455px;}';
    eHTML += '</style>';

    $j("#ePanel").html(eHTML);
	
//$j("#ePanel").fadeTo(1, 500);
//$j("#ePanel").animate({opacity: 1.0}, 300);
	
//Get Class from DIV:
//theClass = $j("#panel_" + currentOpenNumber + " div").attr('class');
//Class is still not being applied for some reason.
//$j("#ePanel").addClass(theClass);
	
}



function closeExpanded() {
    $j('#ePanelData').remove();
    $j("#blackDiv").animate({
        width: 466,
        height: 455,
        top: 92,
        left:eL2
    }, 200, removeEpanel);
}

function removeEpanel() {
    $j('#blackDiv').remove();
    $j("#ePanel").animate({
        width: 229,
        height: 147,
        top: eT,
        left: eL
    }, 200, resetPanels);
}

function resetPanels() {
    $j('#ePanel').remove();
    $j("#" + currentOpenPanel).find("#panel").animate({
        top: '0px'
    }, 200);
    $j("#" + currentOpenPanel).find("#panel").find('#content').fadeIn(200);
    panelIsOpen = false;
    currentOpenNumber = 0;
}

function highlightIcon(iconID) {
    $j("#icon_" + iconID).find("#iconWhite").css({
        "visibility" : "hidden"
    });
    $j("#icon_" + iconID).find("#iconBG").stop().animate({
        top: '-8px'
    }, 400);
    closeIcon = iconID;
}

function unhighlightIcon(iconID) {
    $j("#icon_" + iconID).find("#iconWhite").css({
        "visibility" : "visible"
    });
    $j("#icon_" + iconID).find("#iconBG").stop().animate({
        top: '0px'
    }, 400);
}


function iconOver() {
    isPausedRot = true;
    myName = $j(this).attr('id');
    myNumber = parseInt(myName.substring(myName.length - 1));
	
    if (myNumber - 1 != currentBB) {
        rotation(currentBB, myNumber-1);
    }
}


function windowResized() {
	
    var browserWidth = $j(window).width();
    var browserHeight = $j(window).height();
	
    if (panelIsOpen) {
        //Resize Black
        $j("#blackDiv").css({
            "width" : browserWidth + "px",
            "height" : browserHeight + "px"
            });
		
        var p = $j("#" + currentOpenPanel).find("#panel");
        var position = p.offset();
        newL = position.left;
		
        if (currentOpenNumber < 3) {
        //do nothing
        } else {
            newL = newL - 237;
        }
		
        $j("#ePanel").css({
            "left" : newL + "px"
            });
    }
	
}


