// JavaScript Document
$(document).ready(function()						   
{
	////////////////////////////////////////
	// SET ALL HOME PANELS SAME HEIGHT
	////////////////////////////////////////
	var howH = $('#panelArea').height() - $('.bpHeadTop').height() -70;
	$('.btContent').css('min-height', howH);
	$('.qlContent').css('min-height', howH);
	
	////////////////////////////////////////
	// SET HERO INFO TO DEFAULT
	////////////////////////////////////////
	
	var infoTitle = $('.heroImages li span:eq(0)').text();
	$('.heroText h1').text($('.heroImages li span:eq(0) h1').text());
	$('.heroText p').html($('.heroImages li span:eq(0) p').html());
	
	
	////////////////////////////////////////
	// MOVE THE HERO IMAGE
	////////////////////////////////////////
	
	var runSilde = setInterval(autoSlide, 6000);
	var slideCount=1;
	var startPos;
	
	function autoSlide()
	{
		if(slideCount <= 5)
		{
			startPos = $("#slideNav li:eq(" + slideCount + ")");
			heroImage(startPos, slideCount);
			++slideCount;
		}
		else
		{
			slideCount=0;
			autoSlide();
		}
		
		
	}
	
	
	
	/////////////////////////////////////////
	// TAB CLICKS
	/////////////////////////////////////////
	$('.imageNumbers li').click(function(){
			
			var whoClicked = $(this).text()-1;
			
			heroImage(this, whoClicked);
			clearInterval(runSilde);

	});
	
	/////////////////////////////////////////
	// THE SLIDER FUNCTION
	/////////////////////////////////////////
	
	function heroImage(who, whoClicked)
	{
		$('.imageNumbers li').attr("id","");
		var xPos = $(who).position().left + 2;
		
		// CHECK IF IT ie TO FIX IT"S MARGIN ISSUE
		if($.browser.msie && jQuery.browser.version <= 7)
		{
			xPos = $(who).position().left -308;
		}
		/// ANIMATE IT
		$('#numBack').animate({
			marginLeft: xPos
		},function() 
		{
			/// finished do someething
		});
		/// MAKE THE NUMBER "SELECTED" BY SWAPPING IDS
		$(who).attr("id","imSelected");
		
		
		/******************************************/
		// HERO AREA
		/******************************************/
		
		var meWidth = $('.heroImages li').children("img").width();
		var infoTitle = $('.heroImages li span:eq(' + whoClicked + ') h1').text();
		var infoSubtitle = $('.heroImages li span:eq(' + whoClicked + ') p').html();
		
		$('.heroText h1').text(infoTitle);
		$('.heroText p').html(infoSubtitle);
		
		if($.browser.msie && jQuery.browser.version <= 7)
		{
			
			var actualDepth = meWidth*whoClicked;
			
		}
		else
		{
			var actualDepth = meWidth*whoClicked;
			var gap = 4*whoClicked;
			actualDepth = actualDepth+gap;
		}

		$('.heroImages').animate
		({marginLeft: -actualDepth},
		 {duration:1000, easing: 'easeOutSine'}
		 );
		
		
		$('.heroText h1').css("display", "none");
		$('.heroText h1').fadeIn(1200, function() {});
		
		$('.heroText p').css("display", "none");
		$('.heroText p').fadeIn(1200, function() {});	
	}

});
