//JavaScript to "animate" a content block expansion / collapse		
var g3originalHeight = null;
var currentContent = null;
var fullHeight = null;
var expandIcon = "https://resource.bmwusa.com/image_39824b12-af9a-4a24-b867-c8dd5fafdaa9.arox";
var expandIcon_1 = "39824b12-af9a-4a24-b867-c8dd5fafdaa9.arox";
var collapseIcon = "https://resource.bmwusa.com/image_76f6fa3f-16d4-4aa9-a6b9-f8a3b771c5af.arox";
var collapseIcon_1 = "76f6fa3f-16d4-4aa9-a6b9-f8a3b771c5af.arox";
var expandHoverIcon = "https://resource.bmwusa.com/image_ec58aa49-eec5-4750-b7c6-07cce8fa801b.arox";
var expandHoverIcon_1 = "ec58aa49-eec5-4750-b7c6-07cce8fa801b.arox";
var collapseHoverIcon = "https://resource.bmwusa.com/image_421b2453-34d3-45dc-9fca-6734570ac8c4.arox";
var collapseHoverIcon_1 = "421b2453-34d3-45dc-9fca-6734570ac8c4.arox";

//Method to identify if we are displaying for IE							
function IsIE()
{
    version = 0;
    if (navigator.appVersion.indexOf("MSIE") >= 0)
    {
        var temp = navigator.appVersion.split("MSIE");
        version = parseFloat(temp[1]);
    }
    return version;
}


//Method to identify the correct content block, based on browser			
function IdentifyContent(content)
{
    var retVal;
    if (IsIE() > 0)
    {
        retVal = content.nextSibling;
    }
    else
    {
        retVal = content.nextSibling.nextSibling;
    }
    return retVal;
}


//Method to identify the correct icon for the panel header				
function IdentifyPanelIcon(content)
{
    var panelIcon = null;
    if (IsIE() > 0)
    {
        panelIcon = content.parentNode.childNodes[0].childNodes[1].childNodes[0];
    }
    else
    {
        panelIcon = content.parentNode.childNodes[1].childNodes[3].childNodes[0];
    }
    return panelIcon;
}


//Initiate the animation based on browser									
function StartAnimation(content)
{
    var browserSpecificContnet = IdentifyContent(content);
    TogglePannelStatus(browserSpecificContnet);
}


//Initial call to begin the animation
function TogglePannelStatus(content)
{
    var timeInterval = 25;
    var sizeAdjustment = 20;

    // make sure only one expand / collapse action runs at once
    if (currentContent == null)
    {
        // assign the object to storage
        currentContent = content;

        // determine if we are expanding or collapsing
        var expand = (content.style.display != "block");

        // since we are expanding, make the content visible
        if (expand)
        {
            content.style.display = "block";
        }

        // assign the height of the object to storage - now that it is visible
        fullHeight = content.offsetHeight;

        // switch the icon
        TogglePanelIcon(content);

        AssignBorder();

        // set the new height of the content
        var newHeight = expand ? sizeAdjustment : fullHeight - sizeAdjustment;
        content.height = newHeight;
        content.style.height = newHeight + "px";

        // begin the animation loop
        setTimeout("AnimatePanel(" + timeInterval + "," + sizeAdjustment + "," + newHeight + "," + expand + ")", timeInterval);

        AssignBorder();
    }
}

//Timed loop to compete the animation										
function AnimatePanel(timeInterval, sizeAdjustment, currentHeight, expand)
{
    var newHeight = currentHeight;
    // is the content still expanding / collapsing
    if (currentHeight >= sizeAdjustment && currentHeight <= (fullHeight - sizeAdjustment))
    {
        //set the new height for the content
        if (expand)
        {
            newHeight = currentHeight + sizeAdjustment;
        }
        else
        {
            newHeight = currentHeight - sizeAdjustment;
        }
        currentContent.height = newHeight;
        currentContent.style.height = newHeight + "px";

        // increase the size adjustment to "speed" the animation
        sizeAdjustment += 2;

        // schedule the next step of the animation
        setTimeout("AnimatePanel(" + timeInterval + "," + sizeAdjustment + "," + newHeight + "," + expand + ")", timeInterval);
    }
    // finish the animation
    else
    {
        // hide the content if we are at the end of a collapse and reset the storage
        if (currentHeight < sizeAdjustment)
        {
            currentContent.style.display = "none";
        }
        currentContent.height = "";
        currentContent.style.height = "";
        currentContent = null;
        fullHeight = null;
    }
    AssignBorder();
}


//Method to switch the icon that is displayed on click
function TogglePanelIcon(content)
{
    var panelIcon = IdentifyPanelIcon(content);
    var expandShown = (panelIcon.src.indexOf(expandIcon) >= 0 || panelIcon.src.indexOf(expandIcon_1) >= 0);
    var expandHoverShown = (panelIcon.src.indexOf(expandHoverIcon) >= 0 || panelIcon.src.indexOf(expandHoverIcon_1) >= 0);
    var collapseShown = (panelIcon.src.indexOf(collapseIcon) >= 0 || panelIcon.src.indexOf(collapseIcon_1) >= 0);
    var collapseHoverShown = (panelIcon.src.indexOf(collapseHoverIcon) >= 0 || panelIcon.src.indexOf(collapseHoverIcon_1) >= 0);

    if (expandShown)
    {
        panelIcon.src = collapseIcon;
    }
    else if (collapseShown)
    {
        panelIcon.src = expandIcon;
    }
    else if (expandHoverShown)
    {
        panelIcon.src = collapseHoverIcon;
    }
    else
    {
        panelIcon.src = expandHoverIcon;
    }
}


//Method to switch the icon that is displayed on mouse over				
function IconHoverOn(content)
{
    var panelIcon = IdentifyPanelIcon(content);
    var expandShown = (panelIcon.src.indexOf(expandIcon) >= 0);
    if (expandShown)
    {
        panelIcon.src = expandHoverIcon;
    }
    else
    {
        panelIcon.src = collapseHoverIcon;
    }
}


// Method to switch the icon that is displayed on mouse out
function IconHoverOff(content)
{
    var panelIcon = IdentifyPanelIcon(content);
    var expandShown = (panelIcon.src.indexOf(expandHoverIcon) >= 0);
    if (expandShown)
    {
        panelIcon.src = expandIcon;
    }
    else
    {
        panelIcon.src = collapseIcon;
    }
}


//Method to alter the image border based on height
function AssignBorder()
{
    if (null != document.getElementById("SideNavG3Container"))
    {
        var contentHeightLN = document.getElementById("accordionContent").offsetHeight + 20;
        var contentHeightPXLN = contentHeightLN + "px";

        document.getElementById("SideNavG3MiddleRowLeft").height= contentHeightLN;
        document.getElementById("SideNavG3MiddleRowLeft").style.height = contentHeightPXLN;
        document.getElementById("SideNavG3MiddleRowRight").height= contentHeightLN;
        document.getElementById("SideNavG3MiddleRowRight").style.height = contentHeightPXLN;
    }
    return;
}

//Method to control gradient and perform collapsible panel logic
function StartupLeftNavAc()
{
    if (null != document.getElementById("SideNavG3Container"))
    {
        AssignBorder();
    }
}

addLoadEvent(StartupLeftNavAc);

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

//end of leftNavAc.js