﻿var gImageSuffix = "-o"; 	// Extension to the base filename for rollovers.

$(document).ready(
	function()
	{
		SetupSliderControls();
		SetupRollovers();
	}
);


// slide left and right by modifying marginLeft using $.animate()
function SetupSliderControls()
{
	$(".sliderLeft").click(evLeft);
	$(".sliderRight").click(evRight);
	$("div.sliderContainer").each( function(e) {
	
		var slider = $(this);
		var sliderId = slider.attr("id");
		var callBack = slider.attr("rel");
		
		$("#bar-"+sliderId+" .sliderItem").click( eval(callBack) );	
	
	});
	
}


// Activate anything with the rollover class. Grabbed from CSS++.js (See Craig for details)
function SetupRollovers()
{
	$("img.rollover").each(
		function(e)
		{
			var currentImage = $(this);
			var srcNorm = currentImage.attr("src");
			var lastDot = srcNorm.lastIndexOf(".");
			var extCheck = srcNorm.substring(lastDot, lastDot - gImageSuffix.length);
			var srcOver = srcNorm;

			if (extCheck != gImageSuffix)
			{
				srcOver = srcNorm.substring(0, srcNorm.lastIndexOf(".")) + gImageSuffix + srcNorm.substring(srcNorm.lastIndexOf("."));
				var tempImage = new Image();
				tempImage.src = srcOver;
				currentImage.attr("overImage", tempImage);
			}

			currentImage.attr("srcNorm", srcNorm);
			currentImage.attr("srcOver", srcOver);
		}
	)
	.mouseover(
		function(e)
		{
			var currentImage = $(this);
			currentImage.attr("src", currentImage.attr("srcOver"));
		}
	)
	.mouseout(
		function(e)
		{

			currentImage = $(this);
			currentImage.attr("src", currentImage.attr("srcNorm"));
		}
	);

}


function evLeft(e)
{

	// Find our parent's .id
	var parentId = $(this).parent().attr("id");
	
	// Find the bar for animation.
	var sliderBar = $("#bar-" + parentId);
	
	// Find our viewport (for correct sizing)
	var viewPort = $("#viewPort-" + parentId);

	// Get our widths
	var barWidth = sliderBar.width();
	var viewPortWidth = viewPort.width();

	// Ok to slide?
	if (parseInt(sliderBar.css("marginLeft")) < 0)
	{
		// Get current left pos.		
		var currentMarginLeft = parseInt(sliderBar.css("marginLeft"));

		// Determine new left pos, adjust to 0 if we'd go past that.
		var newLeftPos = currentMarginLeft + viewPortWidth;
		if (newLeftPos > 0)
		{
			newLeftPos = 0;
		}

		// Animate w/ easing.
		sliderBar.animate({ marginLeft: newLeftPos }, 1500, "easeOutQuint");
	}

}

function evRight(e)
{

	// Find our parent's .id
	var parentId = $(this).parent().attr("id");

	// Find the bar for animation.
	var sliderBar = $("#bar-" + parentId);

	// Find our viewport (for correct sizing)
	var viewPort = $("#viewPort-" + parentId);

	// Get our widths
	var barWidth = sliderBar.width();
	var viewPortWidth = viewPort.width();

	// Calculate the minimum left position for the bar
	var minLeftPos = (barWidth - viewPortWidth) * -1;

	// Ok to slide?
	if (parseInt(sliderBar.css("marginLeft")) > minLeftPos)
	{
		// Get current left pos.
		var currentMarginLeft = parseInt(sliderBar.css("marginLeft"));

		// Determine new left pos, adjust to minLeftPos is we'd go past that.
		var newLeftPos = currentMarginLeft - viewPortWidth;
		if (newLeftPos < minLeftPos)
		{
			newLeftPos = minLeftPos;
		}

		// Animate w/ easing.
		sliderBar.animate({ marginLeft: newLeftPos }, 1500, "easeOutQuint");
	}

}


function evOpenProduct(e)
{
	// Get the div that was clicked (we hope)
	var div = $(this);
	
	// Grab the img tag inside our div and grab it's ID.
	var id = $("img", div).attr("id");

	var arrId = id.split('_');

	// Redirect
	document.location.href = "/Products/Detail.aspx?id=" + arrId[0] + "&c=" + arrId[1];
}


function evOpenSubCategory(e)
{
	// Get the div that was clicked (we hope)
	var div = $(this);

	// Get the parent sliderBar's ID.
	var barId = $(this).parent().attr("id");

	// Rather than continually traversing, we'll just string manip the id.
	var sliderId = barId.split('bar-')[1];

	// Grab the img tag inside our div and grab it's ID.
	var id = $("img", div).attr("id");

	var arrId = id.split('_');

	// Get the DIV we're going to load a new slider into.
	var innerDiv = $("#inner-" + sliderId);

	// Load the new slider control and any associated HTML
	innerDiv.load("/Products/SubSlider.aspx?id=" + arrId[0] + " .subSliderContainer", "", evSubCategoryLoaded); 
}


// Called when a .load() call for a subcategory has completed loading.
function evSubCategoryLoaded(e)
{
	SetupRollovers();
	SetupSliderControls();
}
