var contentCSSClosed = {backgroundImage: 'url(/images/amenities_slide_sm.gif)',color: '#c8c9e2'};
var contentCSSOpen = {backgroundImage: 'url(/images/amenities_slide_lg.gif)',color: '#fff',	zIndex:3,cursor: 'auto'};	
var contentCSSAnim = {height: 32, paddingTop: 12,fontSize: 14};

$(document).ready(function(){
			
	if ($('#wrapper').length == 0) return;

	var wrapperHeight = parseInt($('#wrapper').get(0).offsetHeight); 
	
	/*
	 * Close open content containers
	 */
	function closeOpenContent(openTag, callBack){
		openTag.parent().find('div.section').slideUp(150,function(){
				openTag
				.css(contentCSSClosed)
				.animate({	height: 19,	paddingTop:2,fontSize:11}, 250,function(){			
					openTag.removeClass('open').css({cursor:'pointer'});					
					callBack.apply(openTag);				
				});
		});
	}

	/*
	 * Run header animations
	 */
	function animateHeaders(activeTag){
	
		var idx = 0;

		$('#wrapper h3').each(function(i){			
			if(activeTag == this) idx = i;		
		});	

		var els = $('#wrapper h3'), z = 0;		

		$('#wrapper h3').each(function(z){
			var thisTag = els[z];
			var newTop = z * (thisTag.offsetHeight) + z; // Adding z gives us a 1 pixel spacer

			if(z > idx) { // Element is below selected
				newTop = wrapperHeight - (thisTag.offsetHeight * (els.length-z) - (z-1));	
			}
			
			
			$(thisTag).animate({top: newTop},250,
				function(){			
					if(z == idx){ // Selected node index matches current node index				
						$(thisTag).unbind('mouseover',tagOver).css(contentCSSOpen).animate(contentCSSAnim, 150, openHeaderSection);
					}else{
						$(thisTag).bind('mouseover',tagOver)
					}
		 	   }
			) 
		}) 
	}
	
	function openHeaderSection(){
		var tagTop = parseInt($(this).css('top'));
		var curHeight = parseInt(this.offsetHeight);
		var newheight = wrapperHeight - (wrapperHeight - tagTop) - (curHeight *2);
		$(this).parent().find('div.section').css({top:curHeight + tagTop,height:1,zIndex:5,display:'block'}).slideDown(150);
		$(this).addClass('open')
	}
		
		
	/*
	 * Header click event
	 */
	function runHeaderClick(){
		if($(this).is('.open')) return;
			
		var activeTag = this;
		var openTag = $('#wrapper h3.open');
				
		$(this).removeClass('hover');		
		
		if(openTag.length > 0){
			closeOpenContent(openTag, function(){											   
				animateHeaders(activeTag);
				changePhoto.call(activeTag);
				changeText.call(activeTag);
			});				
		}else{				
			animateHeaders(activeTag);
			changePhoto.call(activeTag); //call makes this refer to activeTag
			changeText.call(activeTag);
		}		
	}
	
	//change photo when header is clicked
	
	function changePhoto() {
		var newPhoto = $(this).parent().find('.photo>img').attr('src');
		$('#main-photo>img').attr('src', newPhoto); 
		
	}
	
	//change text when header is clicked
	
	function changeText() {
		var newText = $(this).parent().find('.intro').html();
		$('#callout-text').html(newText); 
		
	}


	function tagOver(){
		if(!$(this).is('.open')) $(this).addClass('hover');		
	}
	
	function tagOut(){
		if(!$(this).is('.open')) $(this).removeClass('hover');
	}

	/*
	 * Initialize the page
	 */
	function initHeaders(){
		$('#wrapper h3')
			.bind('mouseover',tagOver)
			.bind('mouseout',tagOut)
			.bind('click', runHeaderClick)
			.each(function(x){				
				var thisTag = this;								
				$(thisTag).animate({top: wrapperHeight - (thisTag.offsetHeight * ($('#wrapper h3').length-x) - (x-1))})			
			}
		);				
		// Trigger our first element	
		$('#wrapper h3:eq(0)').trigger('click');
	}
	
	
	
	initHeaders();
	

});