$(function () { home.initiate(); });

var home = function () {
	
	var config = {
			
		homepage : 'div#homepage',
		segment : 'div#homepage div.segment',
		imageContainer : 'div.segment div.segment_images',
		images: 'div.segment div.segment_images img',
		contentContainer : 'div.segment_content_bg',
		content : 'div.segment_content',
		
		header : 'div.segment div.home_header',
		headerContent : 'div.home_header_content',
		headerBg : 'div.home_header_bg',
		flexHeaderBg : 'div.home_header_bg_right',
		headerArrow: 'div.segment div.home_header img.home_header_arrow'
	}, 
	
	params = {
		images : [],
		interval : 1,
		segmentPos : 0,
		imagePos : [1, 1],
		fadeSpeed : 300,
		slideSpeed : 250,
		headerSpeed : 350
	},
	
	img = function ( thisSrc ) {
		return $('<img />').attr({
			src : thisSrc,
			alt : document.title,
			width : 480,
			height : 574,
			zIndex: 10
		});
	},
	
	priv = {
		
		updateImageForAnimation : function () {
			
			//segmentPos 0 = left, 1 = right
			//we need to keep track of which image is visible on clearInterval, 
			//so when the timout is set again, it doesn't start at 0 by default
			if ( params.imagePos[params.segmentPos] == params.images[params.segmentPos].length ) {
				params.imagePos[params.segmentPos] = 0;
			};
			
			//we create the new image
			var image = new img( params.images[ params.segmentPos ][params.imagePos[ params.segmentPos ] ] );
			
			//we append the new image before the visible one in the DOM tree, so the visible one can fade out
			$(config.imageContainer).eq(params.segmentPos).find('img:first').before(image).fadeOut( 1000, function () { $(this).remove(); });
			
			params.imagePos[params.segmentPos]++;
			params.segmentPos == 0 ? params.segmentPos = 1 : params.segmentPos = 0;
		},
		
		resetHeaderAnimation : function () {
			
			var $arrow = $(config.headerArrow),
				$background = $(config.headerBg),
				$content = $(config.headerContent);
				
			//position both header elements to original spot
			$(config.header).stop().animate({ left : '46px' });
			
			//hide the arrows
			$arrow.stop().fadeOut(params.headerSpeed);
			
			//show the background
			$background.stop().animate({opacity : 1.0}, params.headerSpeed);		
			
			//set new size for background images
			$(config.flexHeaderBg).stop().animate({ width : '370px' }, params.headerSpeed);
			
			//position content
			$content.stop().animate({ width : '380px' }, params.headerSpeed);				
		},
		
		//sets the interval for the image rotation
		setAnimationInterval : function () {
			params.interval = window.setInterval( function () {
				priv.updateImageForAnimation();
			},2500 );
		},
		
		//shows the requested segment content
		showSegmentContent : function (i, segment) {
						
			var $this = $(segment),
				$contentBg = $this.find(config.contentContainer, this),
				$content = $contentBg.find(config.content, this);
			
			//swap z-indexes of the segments, due to ie 's z-index stack bug on relative positioned elements in IE
			$(config.segment).eq(i).css('z-index', '90');
			$(config.segment).eq(1-i).css('z-index', '80');
			
			//expand the current segment and load its content on callback
			
			$(config.contentContainer).hide().css('width','480px');
			
			$contentBg.stop().animate(
				{width : '620px', opacity : 1},
				params.slideSpeed,
				function () {
					$content.fadeIn(params.fadeSpeed);
				}
			);			
			
		},
		
		//hides the oposite segment content
		hideSegmentContent : function (i, segment) {
			
			var $this = $(segment),
				$contentBg = $this.find(config.contentContainer, this),
				$content = $contentBg.find(config.content, this);
									
			//set the current segment and its contents to the default state 
			$content.fadeOut( params.fadeSpeed, function () {
				$contentBg.stop().fadeOut(params.fadeSpeed).css({width : '480px'});
			});
			
		},
		
		//sets the mouseenter/mouseleave behaviour on the content
		animateSegmentContent: function(){
		
			$.each($(config.segment), function (i, segment) {
				$(segment).hover(
					function () {
						home.clearAnimationInterval();
						home.fadeImagesForAnimation(0.3);
						priv.showSegmentContent(i, this);
						home.setHeaderAnimation(i);
					}, 
					function () {
						priv.setAnimationInterval();
						home.fadeImagesForAnimation(1);
						priv.hideSegmentContent(i, this);
						priv.resetHeaderAnimation(i);
					}
				);
			});
		}
		
	};
	
	return {
		
		//retrieves two array's of images for the image rotator
		getImagesForAnimation : function () {
			params.images = arguments;
		},
		
		//clears the interval for image rotaion
		clearAnimationInterval : function () {
			window.clearInterval(params.interval);
		},
		
		//animates headers
		setHeaderAnimation : function (i) {
				
			var $activeHeader = $(config.header).eq(i),
				$passiveHeader = $(config.header).eq(1-i),
				$arrow = $(config.headerArrow),
				$background = $(config.headerBg);
			
			//animate the active header
			$background.eq(i).stop().animate({opacity : 0.0}, params.headerSpeed);
			$activeHeader.stop().animate(
				{left : i == 0 ? '-47px' : '147px'},
				params.headerSpeed
			);
			
			//animate the passive header
			$passiveHeader.stop().animate(
				{left : i == 0 ? '155px' : '15px'}, params.headerSpeed )
			.find(config.headerContent)
			.stop().animate( {width : '320px'}, params.headerSpeed );
			
			//show the oposite arrow
			$arrow.eq(1-i).stop().fadeIn(params.headerSpeed);
			
			//set new size for background image
			$background.eq(1-i).find(config.flexHeaderBg).stop().animate( {width : '300px'}, params.headerSpeed );
			
		},
		
		fadeImagesForAnimation : function (to) {
			$(config.imageContainer).each( function () { $(this).find('img:first').stop().fadeTo(params.fadeSpeed, to); } );
		},
		
		initiate : function () {
			priv.setAnimationInterval();
			priv.animateSegmentContent();
		}
		
	};

}();