$(document).ready(function() {	

	img_count = $("#banner img").length; //count images
	//console.log(img_count);
	images = new Array();
	
	$("#banner img").each(function(i){
		var id = "slide_"+i;
		$(this).attr("class", id);
		images[i] = id;
	});
	
	img_width = $("#banner .images .slide_0").attr("width"); //get image width
	
	total_width = img_count * img_width; //total width we have
	//console.log(img_width);
	slider = $("#banner .slider"); 
	
	$("#banner .images").hide();
	$("#banner").append("<div id='slider'></div>");
	
	margin = intialise_slider(img_width);//center image and make full width		

	current = 1;
	$("#next, #prev").click(function(e){
			e.preventDefault();
			
			$("#slider").stop(true, true);
			
			if($(this).attr("id")=="next"){
				//go forwards
				oldmargin = margin;
				margin = margin-img_width;					
				current++;	
				
				right_img = current+1;						
										
				if(right_img==img_count){				
					current = -1;
					right_img = current + 1;
				} else if(right_img>img_count){				
					diff = right_img-img_count;
					current = -1+diff;
					right_img = current + 1;
				}
				
				var src = $(".images .slide_"+right_img).attr("src");
				$("#slider").append("<img src='"+src+"' alt='' class='slide_"+right_img+"'/>");
				var link = $(".images .slide_"+right_img).parent().attr("href");
				$("#slider img.slide_"+right_img).wrap("<a href='"+link+"'></a>");
				
				
				//animate
				$("#slider").animate({marginLeft: margin+"px" }, 400, 'swing', function(){					
					//after animation
					//remove first image
					$("#slider a:first-child").remove();
					$("#slider").removeAttr("style").attr("style", "margin-left:"+oldmargin+"px;");
					margin=oldmargin;
				});									
		
			}
			else {
				//we must be going backwards
				oldmargin = margin;
				newmargin = margin-img_width;
				current--;
				
				left_img = current-1;			

				if(left_img==-1){				
					current = img_count;
					left_img = current - 1;
				} else if (left_img<-1) {
					diff = -1*left_img;
					current = img_count-diff+1;
					left_img = current - 1;
				} 
						
				var src = $(".images .slide_"+left_img).attr("src");
				$("#slider").prepend("<img src='"+src+"' alt='' class='slide_"+left_img+"'/>");
				$("#slider").removeAttr("style").attr("style", "margin-left:"+newmargin+"px;");
				var link = $(".images .slide_"+left_img).parent().attr("href");
				$("#slider img.slide_"+left_img).wrap("<a href='"+link+"'></a>");
				
				//animate
				$("#slider").animate({marginLeft: margin+"px" }, 400, 'swing', function(){					
					//after animation
					//remove first image
					$("#slider a:last-child").remove();
					$("#slider").removeAttr("style").attr("style", "margin-left:"+oldmargin+"px;");
					margin=oldmargin;
				});				
			}				
	});
	
/*
	$(window).resize(function() {
	 	intialise_slider();
	});
*/
	
	function intialise_slider(img_width){
		
		$("#slider").hide();
		
		img_width = parseInt(img_width);
		how_many = Math.floor($(window).width() / parseInt(img_width)) + 2;
		//console.log(how_many);
		//how_many = 3; //for testing
		for(i=0; i<how_many; i++){
			var src = $(".images .slide_"+i).attr("src");
			$("#slider").append("<img src='"+src+"' alt='' class='slide_"+i+"'/>");
			var link = $(".images .slide_"+i).parent().attr("href");
			$("#slider img.slide_"+i).wrap("<a href='"+link+"'></a>");
		}
		
		$("#slider").fadeIn(1600);			
		
		var neg_width = (parseInt($("body").width()) - parseInt(img_width))/2; //get the size of gap after image is centered
		var gapping = neg_width;
		var neg_width = parseInt(img_width)-parseInt(neg_width); //calcualte margin for centering second element
		var margin = -neg_width; //will be negative to start with

		
		$("#slider").css("marginLeft",margin);
		
		//implememt controls
		$("#banner").append("<a href=\"#\" id=\"next\">Next</a>");
		right_nav = (gapping + img_width)-$("#next").width();
		$("#next").css({ position: "absolute", top: "220px", left: right_nav+"px" });
		
		left_nav = gapping;
		$("#banner").append("<a href=\"#\" id=\"prev\">Previous</a>");
		$("#prev").css({ position: "absolute", top: "220px", left: left_nav+"px" });			
		
		return margin;
	}
  
});