// JavaScript Document
//
// 
$(document).ready(function(){
		var num_clients_to_show = 12; // the number of portfolio items to show. must be even number
		var max_pages = Math.floor( $(".blank_list li").size() / num_clients_to_show); // use floor because the first page counts as a page
		var page = 0; // which page you are on using the next and prev buttons
		var nth = 1;
		var current_item = ''; //used for setting color of link when clicked
		var max_list = 0; // used for circular loop in navigation (next on last element goes to first)
		var max_counter = 0;
		var start_of_list = 1;
		
		showPageNums();
		thumbnailEvent();
		showList();
		nextPage();
		prevPage();
		showImage();
		next();
		prev();
		showWork(nth);
		setPage();
		
		
		function setPage(){
			$("#pages_list ul a").click(function(){
				var p = parseInt($(this).attr("page"));
				page = p;
				nth = 1 + (page * num_clients_to_show);
				//warning: don't call next() or prev() here
				showWork(nth);
				thumbnailEvent();
				showList();
				//showPageNums(); // this is how we color the active page
				setCurrentColor();
				showImage();
				//---------
				setPage();
				nextPage();
				prevPage();
				
			});
		}
		//when the next button/arrow is clicked, show the next client
		function next(){
			$("#next").click(function(){
			
				if(nth < max_list){
					nth++;
				}
				else{
					nth = start_of_list;
				}
				
				max_counter++;
				
				showWork(nth);
				thumbnailEvent();
				setCurrentColor();	
				
				if(max_counter >= max_list){
					nth = start_of_list;
					max_counter = num_clients_to_show * page;
				}
				
				return false;
			});
		}
		//when the prev button/arrow is clicked, show the previous client
		function prev(){
			$("#prev").click(function(){
				
				nth = nth - 1;
				if(nth < start_of_list){
					nth = max_list;
					max_counter = num_clients_to_show * page;
				}
				
				showWork(nth);
				thumbnailEvent();
				//set red for current item being viewed
				setCurrentColor();			
				//--------------------------------------
				
				return false;
			});
		}
		
		//function to display the thumbnails in the sidebar if it has any
		function showThumbnails(){
		
			//put thumbnails to sidebar
			var client = $(".blank_list a[nth="+nth+"]");
			var imageArr = new Array();
			var image = client.attr("thumbnails");
			imageArr = image.split("#");
			var title = client.attr("title");
			var url = client.attr("url");
			
			
			var formatted_images = "";

			for(var i = 0; i < imageArr.length; i++){
				//we split here to extract the thumbnail img url, caption, and launch site setting for this image
				var thumb = imageArr[i].split("~");
				if(thumb[2] == 'web'){
					thumb[2] = client.attr("url");	
					
				}
				else{
					thumb[2] = "";
				}
				formatted_images += "<div class='thumbnail_box'><a href='"+thumb[0]+"' title='"+title+"' caption='"+thumb[1]+"' url='"+thumb[2]+"' url='"+url+"' nth='"+nth+"'><div class='thumbnail'><img border='none' src='"+thumb[0]+"' /></div></a></div>";
			}
			
			formatted_images += "";
			
			//alert(image);
			if(image == ""){
				formatted_images = "";
			}
			
			
			$("#thumbnails").html(formatted_images);
			thumbnailEvent();
		}
		
		function thumbnailEvent(){
			//show image when thumbnail clicked
			$("#thumbnails a").click(function(){
				
				
				//add caption
				if($(this).attr("caption") != "undefined"){
					$("#caption").html($(this).attr("caption"));
				}
				
				$("#left_main img").attr({
					src:  $(this).attr("href")
					//set alt tag here if you want
				});
				
				if($(this).attr("url").length > 0){
					//add launch button
					$("#launch").show();
				}
				else{
					$("#launch").hide();	
				}

				
				
				$("#details #job_name").html(($(this).attr("title")).replace(/_/g, " "));
				$("#launch").attr({
					href:  $(this).attr("url")
					//set alt tag here if you want
				});
				nth = parseInt($(this).attr("nth"));
				
				return false;
			});
		}
		
		//function displays the portfolio item to be displayed in the main preview area. It displays the "nth" item in the .blank_list list defined in the gallery pages
		function showWork(nth){
			var list_item = $(".blank_list li:nth-child("+nth+") a");
			
			$("#left_main img").attr({
				src:  list_item.attr("href")
				
			});
			
			$("#details #job_name").html( (list_item.attr("title")).replace(/_/g, " ") );
			
			//add caption
			$("#caption").html(list_item.attr("caption"));
			
			
			//add website launch link if needed
			$("#launch").attr({
				href:  list_item.attr("url")
				//alt?
			});
			
			//if the item is a webpage, show the launch link
			if(list_item.attr("category") == "web"){
				$("#launch").show();
			}
			else{
				$("#launch").hide();
			}
			
			//put thumbnails to sidebar
			showThumbnails();
			//color active link
			setCurrentColor();
		}
		//Switches the client being displayed when a client name is clicked. Updates the nth item to the nth attribute of the list item
		function showImage(){
			$(".client a").click(function(){
				//set red for current item being viewed
				
				//set main image
				$("#left_main img").attr({
					src:  $(this).attr("href")
					//alt?
				});
				$("#details #job_name").html(($(this).attr("title")).replace(/_/g, " ") );
				
				
				//add caption
				$("#caption").html($(this).attr("caption"));
				
				
				$("#launch").attr({
					href:  $(this).attr("url")
					//alt?
				});
				
				
				if($(this).attr("category") == "web" && $(this).attr("url").length > 0){
					$("#launch").show();
				}
				else{
					$("#launch").hide();
				}
				
				nth = parseInt($(this).attr("nth"));
				setCurrentColor();
				//put thumbnails to sidebar
				showThumbnails();
				
				return false;
			});
		}
		
		//makes the active client link turn red
		function setCurrentColor(){
			//set red for current item being viewed
			if(current_item != ''){
				$(current_item).css("color", "#231f20");
			}
			current_item = $("#client_list a[nth="+nth+"]");

			$(current_item).css("color", "#ed1b2d");
		}
		
		//turn to the next page of clients if available
		function nextPage(){
			$("#next_page").click(function(){
				if(page < max_pages){
					
					page++;

					nth = 1 + (page * num_clients_to_show);
					
					showWork(nth);
					thumbnailEvent();
					showList();
					//showPageNums(); // this is how we color the active page
					setCurrentColor();
					showImage();
					setPage();

				}
				
			});
			
		}
		
		//turn to the previous page of clients if available
		function prevPage(){
			$("#prev_page").click(function(){
				if(page >= 1){
					page--;

					nth = 1 + (page * num_clients_to_show);
					showWork(nth);
					thumbnailEvent();
					showList();
					//showPageNums(); // this is how we color the active page
					setCurrentColor();
					showImage();
					setPage();

				}
			});
		}
		
		function showPageNums(){
			/*
			var html = "<ul>";
			for(var i = 0; i <= max_pages; i++){
				if(page == i){
					html += "<li><a style='color:#ed1b2d;' href=\"#\" page="+i+">"+eval(i+1)+"</a></li>";
				}
				else{
					html += "<li><a href=\"#\" page="+i+">"+eval(i+1)+"</a></li>";
				}
			}
			*/
			//html += "</ul><div class='arrow'><a  id='prev_page' href='#'><img border='none' src='../images/control_rewind.png' /></a><a id='prev' href='#'><img border='none' src='../images/control_back.png' /></a><a id='next' href='#'><img border='none' src='../images/control_play.png' /></a><a id='next_page' href='#'><img border='none' src='../images/control_fastforward.png' /></a></div>";
			var html = "<div class='arrow'><a  id='prev_page' href='#'><img border='none' src='../images/control_rewind.png' /></a><a id='prev' href='#'><img border='none' src='../images/control_back.png' /></a><a id='next' href='#'><img border='none' src='../images/control_play.png' /></a><a id='next_page' href='#'><img border='none' src='../images/control_fastforward.png' /></a></div>";
			
			$("#pages_list").html(html);
		}
		
		
		//displays the client links on the page
		function showList(){
			var html = "<div class=\"list\"><ul>";
			for(var i = 1 + (page * num_clients_to_show); i < (1 + (page * num_clients_to_show)) + num_clients_to_show; i++){
				var client_item = $(".blank_list li:nth-child("+i+") ").html();
				if(client_item != null){
					if( (i + (num_clients_to_show / 2)) == ( (1 + (page * num_clients_to_show)) + num_clients_to_show) ){
						html += "</ul></div> <div class=\"list\"><ul>"
					}
					html += "<li class='client'>"+client_item+"</li>";
					
				}
			}
			html += "</ul></div>";
			
			$("#client_list").html(html);
			max_list =  (num_clients_to_show * page) + $("#client_list li").size();
			start_of_list = 1 + (page * num_clients_to_show);
		}
		
		
		
		
	});