// JavaScript Document

var featureList = new Array("Scratch & Repair", "feature 2", "feature 3", "feature 4", "feature 5", "feature 6");

var featListCounter = 0;

// to get the image numbering string either normal or array.
//false for normal (catch 2 last numbers regardless of 0), true otherwise.
function getThumbIdNo(stringVal, isForArray)
{
	var newStringVal = stringVal.substring((stringVal.length - 2), (stringVal.length));
	
	if (isForArray)
		if (newStringVal.indexOf(0) == '0')
			return newStringVal.substring(1, 2);
		
	return newStringVal;
}
$(document).ready(function()
{	
	// default before & after images
	var $defBefore = $('#beforeCycle > img:first');
	var $defAfter = $('#afterCycle > img:first');
	
	// display default before & after images
	$defBefore.css('display', 'block');
	$defAfter.css('display', 'block');
	
	// traverse before & after images and feature text
	$('#btnGalleryPrev').click(function() {
		featListCounter--;
	
		// if going to less than first image, go to last image
		if (featListCounter < 0)
		{
			$defBefore = $('#beforeCycle > img:last');
			$defAfter = $('#afterCycle > img:last');
		
			featListCounter = (featureList.length - 1);
		}
		else
		{
			$defBefore = $defBefore.prev();
			$defAfter = $defAfter.prev();
		}
		
		//cycle pic
		$('#beforeCycle > img').css("display", "none");
		$('#afterCycle > img').css("display", "none");
		$defBefore.fadeIn('show');
		$defAfter.fadeIn('show');
		
		// cycle text
		$('p.contentType').html('<b>' + featureList[featListCounter] + '</b>');
	});
	
	$('#btnGalleryNext').click(function() {
		featListCounter++;
		
		if (featListCounter >= featureList.length)
		{
			$defBefore = $('#beforeCycle > img:first');
			$defAfter = $('#afterCycle > img:first');
			
			featListCounter = 0;
		}
		else
		{
			$defBefore = $defBefore.next();
			$defAfter = $defAfter.next();
		}
		
		$('#beforeCycle > img').css("display", "none");
		$('#afterCycle > img').css("display", "none");
		$defBefore.fadeIn('show');
		$defAfter.fadeIn('show');
		
		$('p.contentType').html('<b>' + featureList[featListCounter] + '</b>');
	});
	
	// change before & after images and feature text based on thumbnail click
	$('.thumbnail').find('img').click(
	function()
	{
		featListCounter = getThumbIdNo(this.id, true)-1;
		
		$('p.contentType').html('<b>' + featureList[featListCounter] + '</b>');
		
		$defBefore = $('#picBefore' + getThumbIdNo(this.id, false));
		$defAfter = $('#picAfter' + getThumbIdNo(this.id, false));
		
		$('#beforeCycle > img').css("display", "none");
		$('#afterCycle > img').css("display", "none");
		
		$defBefore.fadeIn('show');
		$defAfter.fadeIn('show');
	});
	
	// enlarge thumbnails
	$('.thumbnail').find('img').css({'cursor':'pointer'});
	
	$('.thumbnail').find('img').hover(
	function()
	{
		$(this).css({'z-index' : '20'});
		$(this).animate({
				marginTop:'-10px',
				marginLeft:'-10px',
				width:'108px'},
				200);
	},
	function()
	{
		$(this).animate({
				marginTop:'0px',
				marginLeft:'0px',
				width:'86px'},
				200);
		$(this).css({'z-index' : '0'});
	});
});