﻿// Adam Lofting 01/08/2008
var WIDTH_OF_PORTFOLIO_ITEM = 177;
var PORTFOLIO_MARGIN_PER_ITEM = 10;
var AMOUNT_TO_SLIDE_ON_CLICK = 150;
var SLIDER_WIDTH = 5000;
var RAIL_WIDTH = 672;
var HANDLE_WIDTH = 100;
var STARTING_ITEM = 1;
var ITEM_COUNT = 1;


var oSlider = null;
var currentValue = 0;

function setHandleWidths ()
{              
    var oSliderHandle = document.getElementById('SliderHandle');
    var oSliderHandleImage = document.getElementById('SliderHandleImage');
    if (oSliderHandle != null)
    {
        oSliderHandle.style.width= HANDLE_WIDTH + "px";
    }    
    if (oSliderHandleImage != null)
    {
        oSliderHandleImage.style.width= HANDLE_WIDTH + "px";
    }
}

function setupSliders ()
{      
    var iRailMinusHandle = RAIL_WIDTH - HANDLE_WIDTH;

    // amount to slide is the difference between the rail (minus the handle) and the list of links
    var slideLength = SLIDER_WIDTH - RAIL_WIDTH;
    slideLength = slideLength - 50; // use this to tweak right slide 

    var hasSlided = false;
    //var clickPriorToSlide = false;
    //var secondSlideRequired = false;

    currentValue = 0;

    // window.alert(RAIL_WIDTHMinusHande); // testing

    oSlider = new Control.Slider('SliderHandle', 'SliderRail', {	
									axis: 'horizontal',
									increment: 1,
									range:$R(0,iRailMinusHandle),
								
									onSlide:function(v)
									{		
									    $('PortfolioTopLevelNavWrapper').style.left=(-((v/iRailMinusHandle) * slideLength))+'px';
										// negative of
										// percentage of the rail moved across 
										// multiplied by the amount to move
										$('SliderHandleImage').style.left=(v)+'px';
										
										hasSlided = true;																				
									},
									onChange:function(v)
									{									    
										if (hasSlided)
										{
											// then don't animate as already in place
											hasSlided = false; // reset
										}
										else
										{	
											// animate as this is a straight click
																			
											// this is where animation funtions can be called for smooth sliding
											new Effect.Move($('PortfolioTopLevelNavWrapper'), {x:(-((v/iRailMinusHandle) * slideLength)), y:0, mode: 'absolute'});
											new Effect.Move($('SliderHandleImage'), {x:(v), y:0, mode: 'absolute'});
										}	
										currentValue = v;								
									}
								});
			    
}

// left and right
function jumpLeft ()
{			    
    if (oSlider != null)
    {        
        oSlider.setValue(currentValue - AMOUNT_TO_SLIDE_ON_CLICK);                
    }
}

function jumpRight ()
{    
    if (oSlider != null)
    {        
        oSlider.setValue(currentValue + AMOUNT_TO_SLIDE_ON_CLICK);     
    }
}


// Counts the number of portfolio items rendered on the page
// Sets the width of the container div so that the scroll bar is the right length
function setPortfolioWidth (divContainer)
{     
    var ulNav = divContainer.getElementsByTagName("ul");
    if (ulNav != null)
    {
        var liNav = ulNav[0].getElementsByTagName("li");
        ITEM_COUNT = liNav.length;  
        // check which item in the collection does not contain a link        
        var internalLinkCollection;
        for (i = 0; i < ITEM_COUNT; i++)
        {
            internalLinkCollection = liNav[i].getElementsByTagName("a");
            if (internalLinkCollection.length == 0)
            {
                // this is the current item - slider should start at this point
                STARTING_ITEM = i + 1;
            }
        }
                  
        var divWidth = ((WIDTH_OF_PORTFOLIO_ITEM + PORTFOLIO_MARGIN_PER_ITEM) * ITEM_COUNT) + 20; // +20 for luck
        divContainer.style.width= "" + divWidth + "px";
        SLIDER_WIDTH = divWidth;
                
        HANDLE_WIDTH = parseInt((RAIL_WIDTH / divWidth) * RAIL_WIDTH);
        if (HANDLE_WIDTH < 100)
        {
            HANDLE_WIDTH = 100;
        }
        setHandleWidths();
        
        if (HANDLE_WIDTH < RAIL_WIDTH)
        {
            showBespokeScrollBar();
        }
    }                                        
}

function hideDefaultScrollBar ()
{
    var divThatScrolls = document.getElementById('PortfolioTopLevelNav');
    if (divThatScrolls != null)
    {
        divThatScrolls.style.overflow='hidden';
    }
}

// this only becomes visible if the user has JS
function showBespokeScrollBar ()
{
    var bespokeScroller = document.getElementById('SliderContainer');
    if (bespokeScroller != null)
    {
        bespokeScroller.style.visibility='visible';
    }
}

function testForStartingItem()
{
    if (HANDLE_WIDTH < RAIL_WIDTH)
    {
        if (STARTING_ITEM > 1)
        {
            if (oSlider != null)
            {                                        
                //var iSlidePerItem = parseInt((RAIL_WIDTH - HANDLE_WIDTH) / ITEM_COUNT);            
                //oSlider.setValue(iSlidePerItem * (STARTING_ITEM - 1));    
                
                // Total slideable distance = RAIL_WIDTH - HANDLE_WIDTH
                // we want to slide a % of this. STARTING_ITEM / ITEM_COUNT
                
                var iPercentage = STARTING_ITEM / ITEM_COUNT;
                if (iPercentage < 0.5)
                {
                    iPercentage = (STARTING_ITEM - 1) / ITEM_COUNT;
                }
                var iTotalSlidable = RAIL_WIDTH - HANDLE_WIDTH;
                
                //window.alert(STARTING_ITEM);
                //window.alert("% = " + iPercentage);
                //window.alert("px = " + (iPercentage * iTotalSlidable));
                
                var iAmountToSlide = parseInt(iPercentage * iTotalSlidable);
                oSlider.setValue(iAmountToSlide);                
            }
        }
        else
        {
            // this activates the slider
            jumpLeft(); 
        }
    }
}

// this function is called on page load before the </body> tag
function FSD_Init ()
{    
    var divContainer = document.getElementById('PortfolioTopLevelNavWrapper');
    if (divContainer != null)
    {        
        setPortfolioWidth(divContainer);          
        hideDefaultScrollBar();        
        setupSliders();             
        testForStartingItem();          
    } 
}



