$(function(){
	
	$('.thumb').bind("click", function(){
		return false
	})
	
	//Add the arrows
	$("#w_responses_wrapper").prepend("<a href='#' id='arrow_left'>Left</a>")
	
	$("#w_responses_wrapper").append("<a href='#' id='arrow_right'>Right</a>")
		
	//Set up the variables
	position = 0
	scroll_width = $(".w_column:first").width()//get the move by width
	display_columns = 4
	all_columns = $(".w_column").length
	total_columns = all_columns - display_columns
	total_thumbs = $(".thumb").length
	easing_method = "easeInOutCirc"
	scroll_time = 500
	can_create = true
	scroll_column_count = display_columns
	showing_detail = false
	detail_position = 0
	image_id = 0
	current_detail = ""
	animating_roll_over = false
	scroll_time_fast = 150
	
	//Swap th erollover if using IE6
	if ($.browser.msie && $.browser.version.substr(0,1)<7) {
		$('#roll_over').remove()
		$('.roll_over_wrapper').prepend("<img id='roll_over' src='assets/white.gif' />")
	}

	
	
	//Build a div behind the w_responses to act as the mouse out
	$("#w_responses_wrapper").parent().append("<div id='w_responses_out'></div>")
	//Get the w_responses_wrapper position
	outer_offset = $("#wrapper").offset()
		
	offset = $("#w_responses_wrapper").offset()
	pl = offset.left - outer_offset.left
	pt = offset.top - outer_offset.top
	//Position the new div to be behind it
	$('#w_responses_out').css({
		position: "absolute",
		left: pl,
		top: pt,
		height: $("#w_responses_wrapper").height() +80,
		width: $("#w_responses_wrapper").width() +80,
		background: "transparent",
		zIndex: 2
	})
	
	$("#w_responses_out").bind("mouseover", function(){
		if(!showing_detail){
			$('#click_to_view').fadeIn(scroll_time)
			$('.roll_over_wrapper').css({
				left: "-5000px",
				top: "-5000px"
			})	
		}
			
	})
	
	
	//Stop the thumbnails working
	$(".thumb").bind("click", function(){
		return false
	})
	
	
	//Set the w_responses div to be the correct width
	$("#w_responses").width($(".w_column").length * scroll_width)
	
	$("#w_responses").bind("mouseover", function(){
		$('#click_to_view').fadeOut(scroll_time)
	})

	
	//Set the triggers
	$("#arrow_right").bind('click', function(){
		
			
		//Just scrolling through the thumbnails
		if(!showing_detail){
			if(position < total_columns){
				
				
				$('.roll_over_wrapper').css({
					left: "-5000px",
					top: "-5000px"
				})
				
				/* 
				
					The scroll should slide 4 columns unless there are 4 columns to slide
			
					If the amount of columns left on the "outside" is equal to
					or greater than display_columns then slide by display_columns.
					Otherwise slide all the remaining columns over.
			
					Adjust the position variable to match the columns slide
							
				*/
				//How many columns are remianing
				columns_remaining = total_columns - position
		
				//How many columns should scroll?
				if(columns_remaining >= display_columns){
					scroll_column_count = display_columns
				}
				else{
					scroll_column_count = columns_remaining
				}
		
				//Update the position
				position = position + scroll_column_count
				
				animating_roll_over = true
				
				$("#w_responses").animate({
					marginLeft: ((scroll_width * position) * -1) + "px"
				}, scroll_time, easing_method, function(){
					animating_roll_over = false
					hide_arrows()
				})
			}
		}
		//Scrolling through the detail
		else{
			
			if(detail_position <= total_thumbs){
				
				$("#arrow_left").show()
				//Only scroll if there are more elements
				
				//Increment the counter
				detail_position ++
				
				hide_arrows()
				
				
				//capture the id of the current detail box
				current_detail = $(".detail_box")

				//Increment the counter				
				image_id = get_the_id(image_id, 'next')

				//Get the url of the detail page
				url = get_url(image_id)

				//Create a new detail window to the correct side (right in this case)
				//Create the element to load the AJAX in to
				$("#detail_outer_wrapper").append('<div id="detail_wrapper_'+image_id+'" class="right_detail detail_box"></div>')

				// Load the AJAX content
				$("#detail_wrapper_"+image_id).load(url+" #detail", function(){

					
					//The AJAX has now loaded

					//Scroll both windows to the left
					$("#detail_outer_wrapper").animate({
						marginLeft: $("#detail_wrapper_"+image_id).width() * -1
					}, scroll_time, easing_method, function(){
						//Delete the original
						$(current_detail).remove()
						$("#detail_outer_wrapper").css({
							marginLeft: 0
						})
					})
					
					
				});
			}//End if detail_position <= total_thumbs
			else{
				$("#arrow_right").hide()
			}
						
		}//End else
		return false;
	})
	
	$("#arrow_left").bind('click', function(){
		
		if(!showing_detail){
			if(position > 0){
				
				$('.roll_over_wrapper').css({
					left: "-5000px",
					top: "-5000px"
				})
				
				//How many columns are remianing
				columns_remaining = position

				//How many columns should scroll?
				if(columns_remaining >= display_columns){
					scroll_column_count = display_columns
				}
				else{
					scroll_column_count = columns_remaining
				}
		
				position = position - scroll_column_count
				
				animating_roll_over = true
		
				$("#w_responses").animate({
					marginLeft: ((scroll_width * position) * -1) + "px"
				}, scroll_time, easing_method, function(){
					animating_roll_over = false
					hide_arrows()
				})
			}
		}
		else{
			
			if(detail_position > 0){
		
				//Make this dynamic
				$("#arrow_left").show()
			
				detail_position = detail_position -1
				hide_arrows()
				
				//capture the id of the current detail box
				current_detail = $(".detail_box")
		
				//Increment the counter				
				image_id = get_the_id(image_id, 'prev')
		
				//Get the url of the detail page
				url = get_url(image_id)
		
				//Create a new detail window to the correct side (right in this case)
				//Create the element to load the AJAX in to
				$("#detail_outer_wrapper").prepend('<div id="detail_wrapper_'+image_id+'" class="left_detail detail_box"></div>')

				// Load the AJAX content
				$("#detail_wrapper_"+image_id).load(url+" #detail", function(){
					
					//The AJAX has now loaded
				
					$("#detail_outer_wrapper").css({
						marginLeft: "-592px"
					})			

					//Scroll both windows to the left
					$("#detail_outer_wrapper").animate({
						marginLeft: 0//$("#detail_wrapper_"+image_id).width()
					}, scroll_time, easing_method, function(){
						//Delete the original
						$(current_detail).remove()
						
						
					})
				});
			}
			else{
				$("#arrow_left").hide()
			}
			
		
		}//End else
		return false;
	})
	
	
	
	//Check the arrows
	hide_arrows()
	
	

	//Roll over the thumbnail and make it grow or something
	$(".w_column a img").bind("mouseover", function(){
		
		if(can_create){
			offset = $(this).offset()
			outer_offset = $("#wrapper").offset()

			
			left = offset.left - outer_offset.left
			pos_top = offset.top - outer_offset.top
			
			
			img_src = $(this).attr('src')
		
			//Place the white box over the div
			$('.roll_over_wrapper').attr({
				id: "img|"+$(this).parent().attr("id")
			})
			
			if(!animating_roll_over){
				$('.roll_over_wrapper').css({
					left: left,
					top: pos_top,
					position: "absolute",
					width: $(this).width(),
					height: $(this).height(),
					zIndex: "5"
				})	
			}

		}
		
		
		//Setup the trigger for the hovering thumb
		$('#roll_over').bind('click', function() {
			
			
			$(this).parent().remove()
			
			$('#detail_outer_wrapper').remove()
			
			
			
			
			//Stop the rollover thumbs being created
			can_create = false
			
			//Set the page display type
			// This then make the arrows scroll left and right through the detail
			showing_detail = true
			
			//Hide the roll over
			$(this).parent().css({
				left: "-5000px",
				top: "-5000px"
			})
		
			
			// Get the url
			image_id = $(this).parent().attr("id")
			image_id = image_id.split("|")[1]
			detail_position = parseInt(image_id.split("_")[1])
			url = get_url(image_id)
			
			//Work out the position and show the correct arrows
			
			hide_arrows()
			
			
			//Create the element to load the AJAX in to
			$("#w_responses_wrapper").prepend('<div id="detail_outer_wrapper"><div id="detail_wrapper" class="detail_box"></div></div>			')
			//capture the id of the current detail box
			current_detail = $(".detail_box")
			
			// Load the AJAX content
			$("#detail_wrapper").load(url+" #detail", function(){
				
				
				//Set the CSS for the AJAX Content
				$("#detail_wrapper").css({
					marginTop: $('#w_responses_wrapper').height() * -1
				})
				$("#detail_outer_wrapper").css({
					overflow: "visible"
				})
				//Slide it in to place
				$("#detail_wrapper").animate({
					marginTop: 0
				}, scroll_time, easing_method, function(){
					if(showing_detail){
						//Add a close button
						
						$("#close_btn").remove()
						$("#w_responses_wrapper").append('<a href="#" id="close_btn">Close</a>')
					}
					
				
					//Close button trigger
					$('#close_btn').bind("click", function(){
						
						animating_roll_over = true
						
						//remove the close button
						$(this).remove()
						
						//Remove the div
						$('#detail_outer_wrapper').animate({
							marginTop: $('#w_responses_wrapper').height() * -1
						}, scroll_time, easing_method, function(){
						
							if ($.browser.msie && $.browser.version.substr(0,1)<7) {
								$('#w_responses_wrapper').prepend("<a href='#' class='roll_over_wrapper'><img id='roll_over' src='assets/white.gif' /></a>")
							}
							else{
								$('#w_responses_wrapper').prepend("<a href='#' class='roll_over_wrapper'><img id='roll_over' src='assets/white.png' /></a>")
							}
						
							
							
							$('#detail_outer_wrapper').css({
								marginTop: 0
							})
							$("#detail_outer_wrapper").remove()
							
							animating_roll_over = false
							
						})
						
						
						
						//reset variables
						showing_detail = false
						image_id = 0
						current_detail = ""
						can_create = true
						
						hide_arrows()
						
						$('#click_to_view').fadeIn(scroll_time)

						
						return false;
					})
				})
				
			});
			

			return false;
		});
		
		
		
	})
	
	
	
})

function get_url(id){
	return $("#"+id).attr("rel")
}

function hide_arrows(){
	if(!showing_detail){
		if(position == 0){
			$("#arrow_left").hide()
			$("#arrow_right").show()
		}
		else if(position == total_columns){
			$("#arrow_right").hide()
			$("#arrow_left").show()
		}
		else{
			$("#arrow_right").show()
			$("#arrow_left").show()
		}
	}
	else{
	
		if(detail_position > 1){
			$("#arrow_left").show()
		}
		else{
			$("#arrow_left").hide()
		}
		if(detail_position < total_thumbs){
			$("#arrow_right").show()
		}
		else{
			$("#arrow_right").hide()
		}
	}
}

function get_the_id(current_id, direction){
	if(direction == "next"){
		image_id_part = parseInt(image_id.split("_")[1]) + 1
	}
	else{
		image_id_part = parseInt(image_id.split("_")[1]) - 1
	}
	image_id_part = image_id.split("_")[0] + "_" + image_id_part
	image_id_new = image_id_part
	
	return image_id_new
}