$(document).ready(function(){
	$.getJSON('/header_content'
	,function(data){
	//var pic_array=$.makeArray(data);
	build($.makeArray(data));
	});		
});

function build(pic_array){

	for (i=1;i<pic_array.length+1;i++){
		
		$(".scrollContainer").append('<div class="panel" id="panel_'+i+'" ><div class="inside"><a href="'+parseInterior(pic_array[i-1])+'"><img src="/files/catalog/int/'+pic_array[i-1]+'_int.png"  rel="'+pic_array[i-1]+'" /></a></div></div>');

		}	

	function parseInterior(el){
		var arr=el.split("_");
		var out='/catalog-one?id_man='+arr[0]+'&id_col='+arr[1]+'&id_el='+arr[2];
		return out;
	}
	
	$(function() {
		
		
		var totalPanels			= $(".scrollContainer").children().size();
		
		var regWidth			= $(".panel").css("width");
		var regImgWidth			= $(".panel img").css("width");
		var regTitleSize		= $(".panel h2").css("font-size");
		var regParSize			= $(".panel p").css("font-size");
		
		var movingDistance	    = 280;
		
		var curWidth			= 325;
		var curImgWidth			= 300;
		var curTitleSize		= "20px";
		var curParSize			= "15px";

		var $panels				= $('#slider .scrollContainer > div');
		var $container			= $('#slider .scrollContainer');

		$panels.css({'float' : 'left','position' : 'relative'});
	    
		$("#slider").data("currentlyMoving", false);

		$container

			.css('width', ($panels[0].offsetWidth * $panels.length) + 200 )
			.css('left', "-283px");

		var scroll = $('#slider .scroll').css('overflow', 'hidden');

		function returnToNormal(element) {

			$(element)
				.animate({ width: regWidth })
				.find("img")
				.animate({ width: regImgWidth,'margin-top':"0" })
			    .end()
				.find("h2")
				.animate({ fontSize: regTitleSize })
				.end()
				.find("p")
				.animate({ fontSize: regParSize });
		
		
		};
		
		function growBigger(element) {
		
			var current_el=$(element).find('img').attr('rel');
			
			$(element)
				.animate({ width: curWidth })
				.find("img")
				.animate({ width: curImgWidth,'margin-top':"-25"})
				.end()
				.find("a")
				.attr({href:parseInterior(current_el)})
				.end()
				.find("h2")
				.animate({ fontSize: curTitleSize })
				.end()
				.find("p")
				.animate({ fontSize: curParSize });
			//src=$(element).find("img").attr('src');
			//alert(src);
			//$(element).find("a").attr('href','/aaaa').end();
			
		}
		function addA(element){
			
		}
		
		function parseInterior(el){
			var arr=el.split("_");
			var out='/catalog-one?id_man='+arr[0]+'&id_col='+arr[1]+'&id_el='+arr[2];
			return out;
		}
		//direction true = right, false = left
		function change(direction) {
		   
		    //if not at the first or last panel
			if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }	
	        
	        //if not currently moving
	        if (($("#slider").data("currentlyMoving") == false)) {
	            
				$("#slider").data("currentlyMoving", true);
				
				var next         = direction ? curPanel + 1 : curPanel - 1;
				var leftValue    = $(".scrollContainer").css("left");
				var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
			
				$(".scrollContainer")
					.stop()
					.animate({
						"left": movement
					}, function() {
						$("#slider").data("currentlyMoving", false);
					});
				
				returnToNormal("#panel_"+curPanel);
				growBigger("#panel_"+next);
				
				curPanel = next;
				
				//remove all previous bound functions
				$("#panel_"+(curPanel+1)).unbind();	
				
				//go forward
				$("#panel_"+(curPanel+1)).click(function(){ change(true); });
				
				$("#panel_"+(curPanel)).click(function(){
					alert('aaaaaaa');
				
				
				});
				
	            //remove all previous bound functions															
				$("#panel_"+(curPanel-1)).unbind();
				
				//go back
				$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
				
				//remove all previous bound functions
				$("#panel_"+curPanel).unbind();
			}
		}
		
		// Set up "Current" panel and next and prev
		growBigger("#panel_3");	
		var curPanel = 3;
		/*
		$("#panel_"+(curPanel+1)).click(function(){ change(true); });

		
		$("#panel_"+(curPanel-1)).click(function(){ change(false); });
		*/
		//when the left/right arrows are clicked
		$(".right").click(function(){ change(true); });	
		$(".left").click(function(){ change(false); });
		
		
		
	});
	
	
}