/*
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 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"
    });
    //Update Date 2011-4-25(让鼠标移动在图片上面的时候不改变Top)
//    $("#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"
        });
    }

}