var menu_down = false
var speed = 200
var padding = 20
var on_page = false
var home_message = "Home"

var contact_loaded = false;
var bg_image_src = ''

var original_image

var old_heading

var screen_height

$(function () {

	//Capture the original image
	original_image = $("#border").html()
	
	$("#main_nav").hide()
	$("#main_content").hide()
	
	$("#hidden_content").hide()
	
	$("#image_nav_wrapper").hide()
	
	//Slide the Menu
	$("#nav_opener").click(
		function(){
			slide_menu()
			return false
		}
	)
	
	$("#logo a").click(
		function(){
			slide_menu()
			return false
		}
	)
	
	//Watch to see if the mouse is over and change header message	
	$("#nav_opener").mouseover(
		function(){
			if(on_page){
				if($("#nav_opener").html() != home_message){
					old_heading = $("#nav_opener").html()
					change_heading(home_message)
				}
			}
		}
	)
	
	$("#nav_opener").mouseout(
		function(){
			if(on_page){
				change_heading(old_heading)
			}
		}
	)
	
	
	//Load a page
	$("#main_nav .page_link").click(
		
		function(){
			load_page(this.id)
			return false
		}
	)

	//Load the selected work
	
	$("#case_studies_ul li a").click(

			function(){
				//load_work(this.id, this.href)
				
				return false
	})
	


	

	
});

function slide_menu(){

	if(!on_page){
		//It's still on the menu page
		if(!menu_down){
			//Slide the nav down
			
			$("#navigation ul").slideDown(speed, "easeInOutCubic")
			menu_down = true
			
		}
		else{
			//Slide the nav up
			$("#main_content").hide()
			$("#bg_colour").css({
				height: "auto"
			})
			$("#main_nav").slideUp(speed, "easeInOutCubic", function(){
				$("#main_nav").hide()
			})
			menu_down = false
			
		}
	}
	else{
		//A Page has been loaded
		on_page = true
		$("#main_content").slideUp(speed, function(){
			resize_menu()
		})
		
	}
	
}

function load_page(page){

	
	if(page == 'contact' && contact_loaded == false){
		$("#border #home_image").fadeOut()
	}
	
	
	if(contact_loaded && page != 'contact'){
		$("#border #home_image").fadeIn()
	}

	//Grab the content and place it in the div
	page_html = $("#"+page+"_page").html()
	$("#main_content").html(page_html)
	
	
	
	
	

	$("#main_nav").animate({
		marginTop: $("#main_nav").height() * -1
	}, speed, "easeInOutCubic", function(){
		on_page = true
		//Hide the nav
		$("#main_nav").hide()
		
		//Display the content
		$("#main_content").slideDown(speed, function(){
			resize_box(page)
		})
		
		if(page == 'case_studies'){
			//console.log($('').length)
			$("#case_studies_ul li a").click(
				function(){
					load_work(this.id, this.href)
					return false
			})
		}
		
		
	})
	
	
	
}

function resize_box(page){

	
	//Change the page title
	title = $("#"+page).html()
	change_heading(title)
	init()
}

function resize_menu(){

	$("#image_nav_wrapper").fadeOut("slow")
	
	$("#image_nav_wrapper").html('')
	
	$("#client_images").fadeOut("slow", function(){
		$("#client_images").html('')
	})
	
	//Revert to original image
	swap_main_image(original_image)


	//Show menu
	$("#main_nav").show()
	$("#main_nav").animate({
		marginTop: 0
	}, speed, "easeInOutCubic", function(){
		change_heading("Welcome")
		on_page = false
		init()
	})

}

var changing_title = false
function change_heading(new_heading){
	if(new_heading == 'Welcome'){
		$("#nav_opener_wrap").removeClass('white')
		$("#nav_opener_wrap").addClass('no_white')
	}
	else{
		$("#nav_opener_wrap").removeClass('no_white')
		$("#nav_opener_wrap").addClass('white')
	}
	$("#nav_opener").html(new_heading)
}

var in_work = false
/* Selected work
***************************/
function load_work(page, url){
	

	/*
	
	0. Slide up menu
	1. Fade out bg image
	2. Load AJAX content
	
	
	*/

	in_work = true
	
	//Slide up content
	$('#main_nav').slideUp()

	//Fade out image
	$("#border .img").fadeOut()
	
	
	//Load AJAX
	
	$('#main_content').html('<p><img src="/images/layout_images/ajax-loader.gif" width="220" height="19" /></p>');
		$("#main_content").load(url+" #content *", function(){	
			
			
		//Get the title via AJAX
		$("#hidden_title").load(url+" #work_page_title h2", function(){
			var new_title = $("#hidden_title h2").html()
			change_heading(new_title)
			on_page = true
			
			//Display the content					
			$("#main_content").slideDown(speed, function(){
				//Change the page title
				title = $("#"+page).html()
				change_heading(title)
			
			
				$("#image_nav_wrapper").fadeIn("slow", function(){
					load_client_images(url)
				})		
			})
			
		});
			
	});

	
}

//Add title
function selected_work_title(data) {
	alert(data);
}

//Swap images
function swap_main_image(image){
	$("#border").html(image)
	init()
}

//Load client images
current_pos = 1
max_pos = 0
function load_client_images(url){
	//$("#client_images").hide()
	$("#client_images").load(url+" #image_scroller_wrapper",function(){
	
				
		init()
		
		//Set up functionality to slide the client pics
		$(".client_image_link").click(
			function(){
				max_pos = $("#image_scroller li img")
				max_pos = max_pos.length
				position = this.id.slice(this.id.lastIndexOf("_")+1, this.id.length +1)
				scroll_images(position)
				return false
			}
		)
		
		/*
$("#main_content").animate({
			border: 'none'
		}, 1000, function(){
			set_image_scroller_heights()
			
			
			$("#client_images_down").click(
				function(){
					max_pos = $("#image_scroller li img")
					max_pos = max_pos.length
					position = parseInt(current_pos) + 1
					if(position <= max_pos){
						scroll_images(position)
					}
					return false
				}
			)
			$("#client_images_up").click(
				function(){
					max_pos = $("#image_scroller li img")
					max_pos = max_pos.length
					position = parseInt(current_pos) - 1
					if(position > 0){
						scroll_images(position)
					}
					return false
				}
			)
			
			$("#client_images").fadeIn(speed)
			move_mid_screen()	
		})
*/
	})
}

var old_nav_id = 1
function set_selected_image_nav(id){
	//"image_" + id
	$(".selected_image_nav").removeClass("selected_image_nav");
	$("#image_" + id).addClass("selected_image_nav");
	/*
if(old_nav_id > 0){
		$("#image_" + old_nav_id).removeClass("selected_image_nav");
	}
*/
	old_nav_id = id
}

function scroll_images(position){
	$("#image_scroller").animate({
		marginTop: ((position-1) * screen_height) * -1
	},"easeInOutCubic", function(){
		current_pos = position
		move_mid_screen()
	})
	set_selected_image_nav(position)
}

function set_image_scroller_heights(){
	screen_height = winH - (border_width *2) //- padding
	screen_width = winW - 20
		
	$("#client_images").css({
		height: screen_height,
		overflow: "hidden"
	})
	$("#image_scroller li").css({
		height: screen_height,
		overflow: "hidden"
	})
	$("#image_scroller").css({
		width: screen_width
	})
	
	//Resize images to fit window size
	imgs = $("#image_scroller li img")
	if(imgs.length > 0){
		//loop through the images resizing where needed.
		for(i=0; i<imgs.length; i++){
			//if(imgs[i].height > screen_height){
				imgs[i].height = screen_height //* .85
			//}
		}
	}
	
}

function move_mid_screen(){
	if ( $("#client_images").length > 0 ) {
		$("#client_images").fadeIn(speed)
		
		screen_height = winH - (border_width *2) //- padding
		difference = screen_height - $("#image_scroller img").height()
		$("#image_scroller img").animate({
			marginTop: 0//difference/2
		}, speed)
		
		
		size_client_image()
		
		$("#client_images").fadeIn(speed)
		
		
		
	}
}


function size_client_image(){
	
	ratioW = winW / image_width
	ratioH = $('#border').height() / image_height
	
	
	var new_w = image_width * ratioW
		
	if(ratioW > ratioH){
	//Width is greater than height
		if(new_w > min_width){
			$("#image_scroller img").css({
				width: (image_width * ratioW) - (border_width *2),
				height: (image_height * ratioW) - (border_width *2)
			})
		}				
	}				
	else{
		$("#image_scroller img").css({
			width: (image_width * ratioH) - (border_width *2),
			height: (image_height * ratioH) - (border_width *2) + 20
		})
	
	}	
	if(new_w > min_width){
		$("#border").css({
			width: winW - (border_width *2),
			height: winH - (border_width *2),
			overflow: "hidden"
		})
	}
	
}