// JScript File
var fps = 40;
var fading = false;

var whatsHappeningContainerCollapsed = false;

function ResizeRefineContainer()
{
    var element = document.getElementById("refinecontainer");
    var filterTabText= document.getElementById("filtertabtext");
    var filterContracted= document.getElementById("filtercontracted");
    var filterContractLeft = document.getElementById("filtercontractleft");
    var startingHeight = element.clientHeight;
    filterTabText.innerHTML = "";
    filterTabText.style.width= "0px";
    var filterTabTextTargetWidth = element.clientWidth -215;
     var filterContractedStartingWidth = filterContracted.clientWidth;
    var filterContractedTargetWidth = element.clientWidth;
    
     //window.alert("filterTabTextStartingWidth: " + filterTabTextStartingWidth + ", filterContractedStartingWidth: " + filterContractedStartingWidth + ", filterContractedTargetWidth: " + filterContractedTargetWidth);
    if (refineContainerCollapsed == false)
    {
       
    
        AnimateNextFrame("refinecontainer", -1, -1, startingHeight, 0, 500, 1, "px", "");
        AnimateNextFrame("filtercontracted", filterContractedStartingWidth, filterContractedTargetWidth, -1, -1, 500, 1, "px", "SwitchOpenClose(false)");
        refineContainerCollapsed = true;
        
        //document.getElementById("expandButtonImg").src = "images/tab-filterproducts.gif";
        //<img id="filter-left" src="images/filter-left.gif" style="float:left;width:13px;border:0" /><img src="images/filter-title.gif" border="0" alt="Filter Products" style="margin-top:5px;" />
    }
    else if (refineContainerCollapsed == true)
    {
         DisplayFilterProducts();
        element.className = "refinecontainer";
        AnimateNextFrame("refinecontainer", -1, -1, startingHeight, 140, 500, 1, "px", "");
        refineContainerCollapsed = false;
        filterContractLeft.innerHTML = "<img id=\"filter-left\" src=\"images/filter-left.gif\" style=\"float:left;width:13px;border:0\" />";
        AnimateNextFrame("filtercontracted", filterContractedStartingWidth, 90, -1, -1, 500, 1, "px", "SwitchOpenClose(true)");
        //AnimateNextFrame("filtertabtext", filterTabTextStartingWidth, 0, -1, -1, 400, 1, "");
        var openClose = document.getElementById("filter-right");
        openClose.src = "images/filter-right-closed.gif";
        var paragraphHolder = document.getElementById("paragraphHolder");
        if (paragraphHolder != null)
        {
            paragraphHolder.innerHTML = "<p style=\"font-size:21px;\"> &nbsp;</p>";
        }
        //document.getElementById("expandButtonImg").src = "images/tab-filterproducts-contract.gif";
    }
}


function ResizeWhatsHappeningContainer()
{
    
    var element = document.getElementById("whatsHappeningContainer");
    var startingHeight = element.clientHeight;
    
    if (whatsHappeningContainerCollapsed == false)
    {
        AnimateNextFrame("whatsHappeningContainer", -1, -1, startingHeight, 0, 500, 1,"px", "WhatsHappeningContainerResized()");
        whatsHappeningContainerCollapsed = true;
        //document.getElementById("expandButtonImg").src = "images/tab-filterproducts.gif";
    }
    else if (whatsHappeningContainerCollapsed == true)
    {
        AnimateNextFrame("whatsHappeningContainer", -1, -1, startingHeight, 50, 500, 1,"px", "WhatsHappeningContainerResized()");
        whatsHappeningContainerCollapsed = false;
        //document.getElementById("expandButtonImg").src = "images/tab-filterproducts-contract.gif";
    }
}

function WhatsHappeningContainerResized()
{
    var element = document.getElementById("whatsHappeningContainer");
    element.className = "hiddencontainer";
}

function SwitchOpenClose(toOpen)
{

    var filterContractLeft = document.getElementById("filtercontractleft");
    var openClose = document.getElementById("filter-right");
    if (toOpen == false)
    {
        var element = document.getElementById("refinecontainer");
        element.className = "refinecontainerhidden";
        openClose.src = "images/filter-right.gif";
        var paragraphHolder = document.getElementById("paragraphHolder");
        if (paragraphHolder != null)
        {
            paragraphHolder.innerHTML = "";
        }
        filterContractLeft.innerHTML = "<img id=\"filter-left\" src=\"images/filter-left.gif\" style=\"float:left;width:13px;border:0\" /><img src=\"images/filter-title.gif\" border=\"0\" alt=\"Filter Products\" style=\"margin-top:5px;\" />";
        FillCollapsedFilterProducts();
    }
    else
    {
       
    }
}

function FadeResults()
{
    var resultsContainer = document.getElementById("resultsContainer");
    var transparencyDiv = document.getElementById("transparencyDiv");
    var startingTransparency = 0;
    fading = true;
    SetElementTransparency(transparencyDiv, startingTransparency);
    //transparencyDiv.innerHTML = "<br /><br /><br /><br /><br /><img alt=\"Loading Please Wait...\" src=\"images/loading.gif\" />";
    transparencyDiv.style.height = (resultsContainer.offsetHeight) + "px";
    transparencyDiv.style.width = resultsContainer.offsetWidth + "px";
    AnimateNextTransparencyFrame("transparencyDiv", startingTransparency, 50, 135, 1, "FadeResultsFinish();");
}

function FadeResultsFinish()
{
    fading=false;
    if (loading == false)
    {
        RequestProductList_callback(storedResult);
    }
}

function UnfadeResults()
{
    var transparencyDiv = document.getElementById("transparencyDiv");
    var startingTransparency = 50;
    transparencyDiv.innerHTML = "<br />";
    AnimateNextTransparencyFrame("transparencyDiv", startingTransparency, 0, 200, 1, "UnfadeResultsFinish()");
    
}

function UnfadeResultsFinish()
{
    var transparencyDiv = document.getElementById("transparencyDiv");
    transparencyDiv.style.height = "0px";
    transparencyDiv.style.width = "0px";
    
    
}


function AnimateNextFrame(elementName, startingWidth, targetWidth, startingHeight, targetHeight, timeLength, currentFrame, sizeSuffix, functionToExecute)
{
    var msPerFrame = 1000 / fps;
    var frameCount = timeLength / msPerFrame;
    frameCount = RoundToDP(frameCount, 0);
    var element = document.getElementById(elementName);
        
    if (targetWidth > -1)
    {
        
        var widthDiff = targetWidth - startingWidth;
        if (widthDiff != 0)
        {
            if (currentFrame < frameCount)
            {
                var movementMultiplier = (CalculateSinPosition(currentFrame, frameCount));
                var newWidth = ((widthDiff / frameCount) * movementMultiplier) + startingWidth;
                newWidth = RoundToDP(newWidth, 0);
            }
            else
            {
                newWidth = targetWidth;
            }
            element.style.width = newWidth + sizeSuffix;  
        }
    }
    if (targetHeight > -1)
    {
        var heightDiff = targetHeight - startingHeight;
        
        if (heightDiff != 0)
        {
            if (currentFrame < frameCount)
            {
                var movementMultiplier = (CalculateSinPosition(currentFrame, frameCount));
                var newHeight = ((heightDiff / frameCount) * movementMultiplier) + startingHeight;
                newHeight = RoundToDP(newHeight, 0);
            }
            else
            {
                newHeight = targetHeight;
            }
            //var infoDiv = document.getElementById("infoDiv");
            //infoDiv.innerHTML = infoDiv.innerHTML + "<br /> old height: " + element.style.height + ", new height: " + newHeight;
            element.style.height = newHeight + sizeSuffix;  
            
        }

        
    }
    if (currentFrame < frameCount)
    {
        currentFrame++;
                
        var t = setTimeout("AnimateNextFrame(\"" + elementName + "\"," + startingWidth + "," + targetWidth + "," + startingHeight + "," + targetHeight + "," + timeLength + "," + currentFrame + ", \"" + sizeSuffix + "\", \"" + functionToExecute + "\")", msPerFrame);
    
    
    }
    else
    {
        if ((functionToExecute != null) && (functionToExecute != ""))
        {
            var t = setTimeout(functionToExecute, 1);
        }
    }
}



function RoundToDP(value, dp)
{
    dp = Math.pow(10,dp);
    value = Math.round((value*dp));
    value = (value / dp);
    return value;
}

function CalculateSinPosition(currentFrame, frameCount)
{
    currentFrameRelativeToPI = (((Math.PI) / frameCount) * currentFrame);
    currentFrameRelativeToPI = RoundToDP(currentFrameRelativeToPI - (Math.PI/2), 4);
    var sinePosition = (Math.sin(currentFrameRelativeToPI) + 1)/2;
    sinePosition = Math.pow(sinePosition, 1/4);
    return frameCount * RoundToDP(sinePosition, 2);
    
}

function SetElementTransparency(element, transparency)
{
   
    element.style.opacity = transparency / 100;
    element.style.MozOpacity = transparency / 100;
    element.style.KhtmlOpacity = transparency / 100;
    element.style.filter = "alpha(opacity=" + transparency + ")";
}

function AnimateNextTransparencyFrame(elementName, startingTransparency, targetTransparency, timeLength, currentFrame, functionToExecute)
{
    var msPerFrame = 1000 / fps;
    var frameCount = timeLength / msPerFrame;
    frameCount = RoundToDP(frameCount, 0);
    var element = document.getElementById(elementName);
        
    if ((targetTransparency > -1) && (targetTransparency < 101))
    {
        
        var transparencyDiff = targetTransparency - startingTransparency;
        if (transparencyDiff != 0)
        {
            if (currentFrame < frameCount)
            {
                //var movementMultiplier = (CalculateSinPosition(currentFrame, frameCount));
                var newTransparency = ((transparencyDiff / frameCount) * currentFrame) + startingTransparency;
                newTransparency = RoundToDP(newTransparency, 1);
            }
            else
            {
                newTransparency = targetTransparency;
            }
            //window.alert("transparency: " + newTransparency);
            SetElementTransparency(element, newTransparency);
        }
    }
    if (currentFrame < frameCount)
    {
        currentFrame++;
                
        var t = setTimeout("AnimateNextTransparencyFrame(\"" + elementName + "\"," + startingTransparency + "," + targetTransparency + "," + timeLength + "," + currentFrame + ", \"" + functionToExecute + "\")", msPerFrame);
    
    
    }
    else
    {
        if ((functionToExecute != null) && (functionToExecute != ""))
        {
            var t = setTimeout(functionToExecute, 1);
        }
    }
}