/*
=============================================================
	Site: 		Quilo.co.uk
	Version:	1.0.0
	Author:		Warren Buckley
	Site:		http://ww.creativewebspecialist.co.uk
=============================================================	
*/

$(document).ready(function() {
    // do stuff when DOM is ready
	
	//Set up variables that we will use
	var itemWidth = 613;        //This is the width of the each item in pixels.
	var totalWidth = 0;         //This is used as a counter variable to calculate the total width
	var totalItems = 0;         //This is used as a counter variable to store the number of items
	var currentItem = 1;        //This is used as a counter to determine what item we are at
	var counterPosition = 0;    //This is used as a counter to determing what px position to use
	
	
	//For each div in the class .Features
	$(".featureContainer .features div").each(function() {
		//Calculate totalWidth and totalItems variables
		totalWidth = totalWidth + itemWidth;
		totalItems = totalItems + 1;
	});
	

	//Lets apply our total width to our div that contains our items
	$(".features").css({ width: totalWidth });
	
	
	//Lets create the HTML for the Prev and Next links to allow us to scroll through the items
	var strHTML = "<div class='leftFeatureSlider'>";
	//strHTML = strHTML + "<a>Prev</a>";
	strHTML = strHTML + "</div>";
	
	strHTML = strHTML + "<div class='rightFeatureSlider'>";
	//strHTML = strHTML + "<a>Next</a>";
	strHTML = strHTML + "</div>";
	
	//Lets add the HTML we have created after the class .Features inside the .FeatureContainer class
	$(".featureContainer .features").after(strHTML);

	//Lets call our function to check if we need to hide links, when the page loads.
	hideLinks(currentItem, totalItems);
	
	
	//Prev link

	//Attach the move left to click event
	$(".leftFeatureSlider").click(function () {
	    
	    if(currentItem >1)
	    {
	        counterPosition = counterPosition + itemWidth;
	        
	        //Lets move it left one place
		    $(".features").animate({ left: + counterPosition + "px"}, 250 );
		
		    //Increase currentItem by one
		    currentItem = currentItem - 1;
	    }

        hideLinks(currentItem, totalItems);
        
	});
	
	
	//Next link
					
	//Attach the move left to click event
	$(".rightFeatureSlider").click(function () {
	
	    if(currentItem != totalItems)
	    {
	        counterPosition = counterPosition - itemWidth;
	        
	        //Lets move it left one place
		    $(".features").animate({ left: + counterPosition + "px"}, 250 );
		
		    //Increase currentItem by one
		    currentItem = currentItem + 1;
	    }
	    
	    hideLinks(currentItem, totalItems);
		
	});
	
});


function hideLinks(currentItem, totalItems)
{
    //Hide Prev link
    if(currentItem == 1)
    {
        $(".leftFeatureSlider").hide();
        
        //Show next arrow
        $(".rightFeatureSlider").show();
        
        //Check if we are last item (this means only one slide)
        if (currentItem == totalItems)
        {
            $(".rightFeatureSlider").hide();
        }        
    }
    //Hide Next link
    else if (currentItem == totalItems)
    {
        $(".rightFeatureSlider").hide();
        
        //Show prev item to allow us to go back
        $(".leftFeatureSlider").show();
    }    
    else
    {
        //Show Prev link
        $(".leftFeatureSlider").show();
        
        //Show Next link
        $(".rightFeatureSlider").show();
    }

}