/*** Denny's Slideshow Animation ***/
$(document).ready(function() {
	
	/*** image width ***/
	var imageWidth = 923;
	
	/*** resize page content ***/
	$('#page-content').css({'width':'2374px', 'z-index':'-1'});
	
	/*** iPhone, iPod, iPad detection for pagination number on homepage slidehow ***/
	/*** useful links: 	http://snipplr.com/view/31607/iphone-ipad-ipod-detect/
						http://www.jquery4u.com/mobile/jquery-detect-mobile-devices-iphone-ipod-ipad/
	***/
	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		$('.slideshow-image').css({"background":"url('images/pages/homepage/SHHmain-image.jpg') no-repeat 0 0"});
		$('.slide-name').css({'height':'22px','width':'709px'});
		$('.pagination-number').css({'width':'203px'});
	}
	
	/*** jquery animate duration ***/
	var duration;
	if ($.browser.msie) {
		duration = 800;
	} else {
		duration = 500;
	}
			
	/*** CSS for IE7 ***/
	if ($.browser.msie) {
		$('.homepage-slideshow-container').parent('div').css({'width':'923px'});
	}
	
	/*** animation when browser is loading ***/
	/*
	$('.homepage-slideshow-container').parent('div').load().fadeIn(1500, function() {
		fadeInOneByOne(startIndex);
	});
	*/
	$(window).load(function () {
		//$('.homepage-slideshow').fadeIn(5000);
		$('.homepage-slideshow').show(0);
		fadeInOneByOne(startIndex);
	});
	
	var numOfRightSideBoxImages = $('.homepage-slideshow-right-side-box-image').size();
	var startIndex = 0;
	
	/*
	function fadeInOneByOne(myStartIndex) {
		if (myStartIndex < numOfRightSideBoxImages) {
			$('.homepage-slideshow-right-side-box-image').eq(myStartIndex).fadeIn(750, function(){
				fadeInOneByOne(myStartIndex + 1);
			});
		}
	}
	*/

	function fadeInOneByOne(myStartIndex) {
		if (myStartIndex < numOfRightSideBoxImages) {
			$('.homepage-slideshow-right-side-box-image').eq(myStartIndex).fadeTo('fast', 0.3, function(){
				fadeInOneByOne(myStartIndex + 1);
			});
		}
	}	
	
	/*** mouse is over slideshow image ***/
	/*
	$('.slideshow-image').hover(
		function() {
			$(this).children('.transbox').show();
			$('.left-arrow').css({'visibility':'hidden'});
			$('.right-arrow').css({'visibility':'hidden'});
		},
		function() {
			$(this).children('.transbox').hide();
			$('.left-arrow').css({'visibility':'visible'});
			$('.right-arrow').css({'visibility':'visible'});
		}
	);
	*/
	/*
	$('.slideshow-image').click(function() {
		var backgroundPos = $(this).css('background-position').split(' ');
		var posX = backgroundPos[0];
		var posY = backgroundPos[1];
		
		switch(posX)
		{
			case '-923px':	location.href = "./work";
		  					break;
			case '-1846px':	location.href = "./work/pacific-urban-residential";
		  					break;
			case '-2769px':	location.href = "./products/smart-edit";
		  					break;
			case '-3692px':	location.href = "./products/new-home-feed";
		  					break;
			case '-4615px':	location.href = "./products/smart-plans";
		  					break;
			case '-5538px':	location.href = "./";
		  					break;
		}
	});
	*/
	
	/*** function to change slide url if arrow button/pagination number button/right side box image is clicked ***/
	function changeSlideURL(index) {
		switch(index) {
			case 0:	$('.slideshow-image').attr('href', '/who-we-are/contact');
		  			break;
		  	case 1:	$('.slideshow-image').attr('href', '/work/examples#s-and-a-homes');
		  			break;
		  	case 2:	$('.slideshow-image').attr('href', '/work');
		  			break;
		  	case 3:	$('.slideshow-image').attr('href', '/work/examples#orleans-homes');
		  			break;
			case 4:	$('.slideshow-image').attr('href', '/work/examples#pacific-urban-residential');
		  			break;
			case 5:	$('.slideshow-image').attr('href', '/products/smart-edit');
		  			break;
			case 6:	$('.slideshow-image').attr('href', '/products/new-home-feed');
		  			break;
			case 7:	$('.slideshow-image').attr('href', '/products/smart-plans');
		  			break;
			case 8:	$('.slideshow-image').attr('href', '/work/examples#summerhill-homes');
		  			break;
			case 9:	$('.slideshow-image').attr('href', '/work');
		  			break;
		}
	};
	
	/*** mouse is over small right side box ***/
	/* This was remmed out by me, Bret.  I'm trying
	 * a different technique below
	 * 
	$('.homepage-slideshow-right-side-boxes a').hover(
		function() {
			$(this).css({'background-position':'214px 0'});
		},
		function() {
			$(this).css({'background-position':'0 0'});
	});
	*/

	$('.homepage-slideshow-right-side-boxes a').hover(
		function() {
			$(this).fadeTo(duration, 1);
		},
		function() {
			$(this).fadeTo(duration, 0.3);
	});	
	
	/*** function to change slideshow name if arrow button is clicked ***/
	function slideName(index) {
		switch(index)
		{
			case 0:	$('.slide-name p span').html('Cookie Cutter');
		  			break;
		  	case 1:	$('.slide-name p span').html('S&A Homes');
		  			break;
		  	case 2:	$('.slide-name p span').html('Orleans Homes');
		  			break;
			case 3:	$('.slide-name p span').html('Pacific Urban Residential');
		  			break;
			case 4:	$('.slide-name p span').html('smartEDIT');
		  			break;
			case 5:	$('.slide-name p span').html('New Home Feed');
		  			break;
			case 6:	$('.slide-name p span').html('smartPLAN');
		  			break;
			case 7:	$('.slide-name p span').html('SummerHill Homes');
		  			break;
		}
	}
	
	/*** 	function to slide a slide
			param indexBefore
	    	param indexAfter
	***/
	function shiftSlide(indexBefore, indexAfter) {
		slideName((indexAfter == 9) ? 0 : indexAfter + 1);
		//changeSlideURL((indexAfter == 6) ? 0 : indexAfter);
		changeSlideURL(indexAfter);

    	$('.pagination-number').find('a').eq(indexBefore).removeClass('active');
		$('.pagination-number').find('a').eq(indexAfter).addClass('active');

		/*
		$('.homepage-slideshow > div').eq(indexBefore).removeClass('current');
		$('.homepage-slideshow > div').eq(indexAfter).addClass('current');
		*/
	}
	
	/*** left arrow button on slideshows navigation ***/
	$('.homepage-slideshow-container .left-arrow').click(function(){
		var currIndex = $('.pagination-number').find('a.active').index();
		var prevIndex = $('.pagination-number').find('a.active').prev().index();
		
		if (currIndex > 0) {
			/*
			$('.homepage-slideshow').animate({
				"left": "+=923px"
			}, duration);
			*/
			
			$('.slideshow-image').animate({
				"background-position": "+=923px 0px"
			}, duration);
			shiftSlide(currIndex, prevIndex);
		} else if (currIndex == 0) {
			
			$('.slideshow-image').animate({
				"background-position": "+=923px 0px"
			}, duration, function(){
				$('.slideshow-image').css({'background-position': '-9230px 0px'});
				shiftSlide(0, 9);	
			});
			/*
			$('.homepage-slideshow').css({'left':'-923px', 'width':'5538px'});
			$('.homepage-slideshow > div').last().clone().prependTo('.homepage-slideshow');
			$('.homepage-slideshow').animate({
				"left": "+=923px"
			}, duration, function(){
				$('.homepage-slideshow').css({'left':'-3692px', 'width':'4615px'});
				$('.homepage-slideshow > div').first().remove();
				shiftSlide(0, 4);
			});
			*/
		}
		$('.homepage-slideshow-right-side-boxes > a').last().prependTo('.homepage-slideshow-right-side-boxes');
	});
	
	/*** right arrow button on slideshows navigation ***/
	$('.homepage-slideshow-container .right-arrow').click(function(){
		var currIndex = $('.pagination-number').find('a.active').index();
		var nextIndex = $('.pagination-number').find('a.active').next().index();

		if (currIndex < 9) {
			/*
			$('.homepage-slideshow').animate({
				"left": "-=923px"
			}, duration);
			*/
			$('.slideshow-image').animate({
				"background-position": "-=923px 0px"
			}, duration);
			 
			shiftSlide(currIndex, nextIndex);
		} else if (currIndex == 9) {
			$('.slideshow-image').animate({
				"background-position": "-=923px 0px"
			}, duration, function(){
				$('.slideshow-image').css({'background-position': '-923px 0px'});
				shiftSlide(9, 0);	
			});
			/*
			$('.homepage-slideshow').css({'width':'5538px'});
			$('.homepage-slideshow > div').first().clone().appendTo('.homepage-slideshow');
			$('.homepage-slideshow').animate({
				"left": "-=923px"
			}, duration, function(){
				shiftSlide(4, 0);
				$('.homepage-slideshow').css({'left':'0px', 'width':'4615px'});
				$('.homepage-slideshow > div').last().remove();
			});
			*/
		}
		$('.homepage-slideshow-right-side-boxes > a').first().appendTo('.homepage-slideshow-right-side-boxes');
	});
	
	/*** pagination number button on slideshow detail navigation on mouseover show next slide title ***/
	var tempIndex;
	var mouseoverIndex;
	$('.slideshows-pagination .pagination-number a').hover(
		function() {
			tempIndex = $('.pagination-number a.active').next().index();
			mouseoverIndex = $(this).index();
			slideName(mouseoverIndex);
		},
		function() {
			if (!isClick) {
				slideName(tempIndex);
			} else {
				isClick = false;
			}
	});
	
	/*** pagination number button on slideshow detail navigation ***/
	var isClick;
	$('.slideshows-pagination .pagination-number a').click(function(){
		var currIndex = $('.pagination-number a.active').index();
		var goToIndex = $(this).index();
		
		if (currIndex < goToIndex && currIndex != goToIndex) {
			var backgroundPos;
			if ($.browser.msie) {
				backgroundPos = $('.slideshow-image').css('background-position-x').split('px ');
			} else {
				backgroundPos = $('.slideshow-image').css('background-position').split('px ');
			}
			var posX = backgroundPos[0];
			posX = parseInt(posX) + (-1) * imageWidth * (goToIndex - currIndex);
			$('.slideshow-image').animate({
					'background-position': posX + 'px 0px'
				}, duration);
			//for (var i = 0; i < (goToIndex - currIndex); i++) {
				/*
				$('.homepage-slideshow').animate({
					"left": "-=923px"
				}, 0);
				*/
			//	$('.slideshow-image').animate({
			//		"background-position": "-=923px 0px"
			//	}, 0);
			//}
		} else if (currIndex > goToIndex && currIndex != goToIndex){
			var backgroundPos;
			if ($.browser.msie) {
				backgroundPos = $('.slideshow-image').css('background-position-x').split('px ');
			} else {
				backgroundPos = $('.slideshow-image').css('background-position').split('px ');
			}
			var posX = backgroundPos[0];
			posX = parseInt(posX) + imageWidth * (currIndex - goToIndex);
			$('.slideshow-image').animate({
					'background-position': posX + 'px 0px'
				}, duration);
			//for (var i = 0; i < (currIndex - goToIndex); i++){
				/*
				$('.homepage-slideshow').animate({
					"left": "+=923px"
				}, 0);
				*/
			//	$('.slideshow-image').animate({
			//		"background-position": "+=923px 0px"
			//	}, 0);
			//}
		}
		
		shiftSlide(currIndex, goToIndex);
		
		if (currIndex < goToIndex && currIndex != goToIndex) {
			for (var i = 0; i < (goToIndex - currIndex); i++) {
				$('.homepage-slideshow-right-side-boxes > a').first().appendTo('.homepage-slideshow-right-side-boxes');
			}
		} else if (currIndex > goToIndex && currIndex != goToIndex){
			for (var i = 0; i < (currIndex - goToIndex); i++){
				$('.homepage-slideshow-right-side-boxes > a').last().prependTo('.homepage-slideshow-right-side-boxes');
			}
		}
		isClick = true;
	});
	
	/*** make the right side boxes clickable and do the slide ***/
	$('.homepage-slideshow-right-side-boxes a').click(function(){
		var currIndex = $('.pagination-number a.active').index();
		var goToIndex = $(this).index();
		
		/*
		for (var i = 0; i <= goToIndex; i++) {
			$('.slideshow-image').animate({
				"background-position": "-=923px 0px"
			}, duration);
		}
		*/
		
		var backgroundPos;
		if ($.browser.msie) {
			backgroundPos = $('.slideshow-image').css('background-position-x').split('px ');
		} else {
			backgroundPos = $('.slideshow-image').css('background-position').split('px ');
		}
		var posX = backgroundPos[0];
		posX = parseInt(posX) + (-1) * imageWidth * (goToIndex + 1);
		if (posX < -9230) {
			posX = posX % 9230;	
		}
		$('.slideshow-image').animate({
				'background-position':   posX + 'px 0px'
			}, duration);
		
		var tempIndex = currIndex + goToIndex + 1;
		if (tempIndex > 9) {
			tempIndex = tempIndex % 10;
		}
		shiftSlide(currIndex, tempIndex);
		for (var i = 0; i <= goToIndex; i++) {
			$('.homepage-slideshow-right-side-boxes > a').first().appendTo('.homepage-slideshow-right-side-boxes');
		}
		
		// faded all right side boxes
		$('.homepage-slideshow-right-side-boxes a').each(function(index) {
			$(this).fadeTo(duration, 0.3);
		});
	});
	
});