var slideWidth = 960;
var infoHeight = 75;
var currentSlide = Number;
var currentSelect = Number;
var select_id = 0;
var currentProject = String;
var speed = 1000;
currentSlide = 0;
currentSelect = 1;
key = false;
title = "CW. / Design & Art Direction"

$(window).load(function() {
	  $('#preloader').fadeOut(1000, function() {
		$(this).remove();
	  });
	});

function init(){
	//var aboutHeight = ("#about_content").height();
	var aboutHeight = document.getElementById('about_mask').offsetHeight;
	$("#btn_about").click( function() {
	$("#about").animate({
		height: aboutHeight
	}, speed,"easeOutExpo");
	
	document.location.hash = "";
	});
	$("#btn_close").click( function() {
		
		$("#about").animate({
			height: "6px"
		}, speed,"easeOutExpo");
	});
	
	
	$(".nav_button").mouseover(onOver);
	$(".nav_button").mouseout(onOut);
	
	$(".arrowRightArea").mouseover(rightOver);
	$(".arrowRightArea").mouseout(rightOut);
	function rightOver(){
		$(this).children(".btn").stop();
		$(this).children(".btn").animate({
			right: "0px"
		}, speed, "easeOutExpo")
	};
	function rightOut(){
		$(this).children(".btn").stop();
		$(this).children(".btn").animate({
			right: "-47px"
		}, speed, "easeOutExpo")
	};
	$(".arrowLeftArea").mouseover(leftOver);
	$(".arrowLeftArea").mouseout(leftOut);
	function leftOver(){
		$(this).children(".btn").stop();
		$(this).children(".btn").animate({
			left: "0px"
		}, speed, "easeOutExpo")
	};
	function leftOut(){
		$(this).children(".btn").stop();
		$(this).children(".btn").animate({
			left: "-47px"
		}, speed, "easeOutExpo")
	};
	
	if(document.location.hash && document.location.hash!=""){		
		var project = document.location.hash.split("#_")[1];
		$("#"+project+"_header").trigger("click");
		
	}
	
	
	//keyboard control
	$(document).keydown(function(e)
	{
		switch(e.which)
		{
			// key down
			case 40:
			if( key == false){
				$("#"+projectName[0]+"_header").trigger("click");
				key = true;
			} else {
				select_id++;
				$("#"+projectName[select_id]+"_header").trigger("click");
			}
			break;
			
			// key up
			case 38:
			select_id--;
			$("#"+projectName[select_id]+"_header").trigger("click");
			break;
			
			// key right
			case 39:
			if(key == true){
				$("#"+projectName[select_id]+"_next").trigger("click");
			}
			break;
			
			// key left
			case 37:
			if(key == true){
				$("#"+projectName[select_id]+"_prev").trigger("click");
			}
			
		}
	});
	/*
	var e = jQuery.Event("keydown");
	e.which = 40; // # key down
	if( e.which == 40){
		$("#"+projectName[0]+"_header").trigger("click");
	}
	*/
	
}
function resetList(){
	document.location.hash = "";
	$.scrollTo(0, 1000);
	for(i=0; i<projectList.length; i++)
	{
		
		$("#"+projectList[i][0]+"_view").stop();
		$("#"+projectList[i][0]+"_view").animate({
			height: "0px"
		}, speed,"easeOutExpo");
		
		
		
		$("#"+projectList[i][0]+"_overlay").stop();
		$("#"+projectList[i][0]+"_overlay").animate({
			width: "0px"
		}, speed,"easeOutExpo");
		$("#"+projectList[i][0]).mouseout(onOut);
		// reset container position
		$("#"+projectList[i][0]+"_container").css('marginLeft', "0px");
		
		
	};
}

function onOver(){
		//var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth;
		//var txtwidth = $(this).children(".nav_over").offsetWidth;
		var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width();
		//var txtWidth = document.getElementByClass("nav_base").offsetWidth
		//var txtWidth = $(document).width();
		$(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
		$(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
			width:txtWidth
		}, speed,"easeOutExpo");
	};
function onOut(){
		$(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
		$(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
			width: "0px"
		}, speed,"easeOutExpo");
};

function projectSlide(project_name, num_img, id){
	var imageWidth = 960;
	
	 $(this).children("#"+project_name+"_view").children("#"+project_name+"_next").click(nextSlide);
	
	
};

function selectSlide(project_name,slide_id,selecter_id, num_img){
	//alert('slide: '+slide_id);	
	currentSlide = slide_id;
	currentSelect = selecter_id;
	//alert(currentSlide);
	$("#"+project_name+"_container").stop();
	$("#"+project_name+"_container").animate({
			'marginLeft': (-currentSlide) * slideWidth
	},speed,"easeOutExpo");
	var imageHeight = document.getElementById(project_name+"_"+selecter_id).offsetHeight;
	$("#"+project_name+"_comp").stop();
	$("#"+project_name+"_comp").animate({
		height: imageHeight
	},speed,"easeOutExpo")
	
	$("#"+project_name+"_view").stop();
	$("#"+project_name+"_view").animate({
		height: Number(infoHeight) + Number(imageHeight)
	}, speed,"easeOutExpo");
	
	$(".arrowRightArea").css('height', imageHeight);
	$(".arrowLeftArea").css('height', imageHeight);
	
	for(i=0; i<num_img; i++)
	{
		//$("#"+project_name+"_thumb_"+[i]).css('opacity', 0.1);
		$("#"+project_name+"_thumb_"+[i]).stop();
		$("#"+project_name+"_thumb_"+[i]).animate({
			"opacity": 0.1
		},speed,"easeOutExpo");
	}
	$("#"+project_name+"_thumb_"+selecter_id).stop();
	$("#"+project_name+"_thumb_"+selecter_id).animate({
		'opacity': 1
	},speed, "easeOutExpo");
	
	slide_count = selecter_id;
	if(slide_total < 10){
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/0"+slide_total;
	} else if( slide_count > 10){
		document.getElementById(project_name+"_count").innerHTML = slide_count+"/"+slide_total;
	}else {
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/"+slide_total;
	}
}

function nextSlide(project_name, count_img, num_img){
	//alert(currentSlide);
	
	var totalCount=Number;
	totalCount = count_img;
	
	for(i=0; i<num_img; i++)
	{
		//$("#"+project_name+"_thumb_"+[i]).css('opacity', 0.1);
		$("#"+project_name+"_thumb_"+[i]).stop();
		$("#"+project_name+"_thumb_"+[i]).animate({
			"opacity": 0.1
		},speed,"easeOutExpo");
	}
	if( currentSlide == totalCount){
		$("#"+project_name+"_thumb_"+currentSelect).css('opacity', 1);
	} else {
		currentSlide++;
		currentSelect++;
		//alert('nextslide:'+ currentSlide);
		$("#"+project_name+"_container").stop();
		$("#"+project_name+"_container").animate({
			'marginLeft': slideWidth*(-currentSlide)
		},speed,"easeOutExpo");
		
		var imageHeight = document.getElementById(project_name+"_"+currentSelect).offsetHeight;
		
		$("#"+project_name+"_comp").stop();
		$("#"+project_name+"_comp").animate({
			height: imageHeight
		},speed,"easeOutExpo")
		
		$("#"+project_name+"_view").stop();
		$("#"+project_name+"_view").animate({
			height: Number(infoHeight) + Number(imageHeight)
		}, speed,"easeOutExpo");
		
		$(".arrowRightArea").css('height', imageHeight);
		$(".arrowLeftArea").css('height', imageHeight);
		
		$("#"+project_name+"_thumb_"+currentSelect).stop();
		$("#"+project_name+"_thumb_"+currentSelect).animate({
			'opacity': 1
		},speed,"easeOutExpo");
		
		slide_count = currentSelect;
		if(slide_total < 10){
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/0"+slide_total;
		} else if( slide_count > 10){
			document.getElementById(project_name+"_count").innerHTML = slide_count+"/"+slide_total;
		}else {
			document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/"+slide_total;
		}
	}
		
	
		
	
}
/*
function nextSlide(project_name, count_img, num_img){
	//alert(num_img);
	
	var totalCount=Number;
	totalCount = count_img;
	
	for(i=0; i<num_img; i++)
	{
		$("#"+project_name+"_thumb_"+[i]).css('opacity', 0.1);
	}
	
	if(currentSlide >= totalCount)
	{
		
		//currentSlide = currentSlide;
		$("#"+project_name+"_thumb_"+currentSelect).css('opacity', 1);
		//alert('nextslide: last '+ currentSlide);
		
	} else {
		currentSlide++;
		currentSelect++;
		//alert('nextslide:'+ currentSlide);
		$("#"+project_name+"_container").animate({
			'marginLeft': slideWidth*(-currentSlide)
		},500,"easeOutExpo");
		
		var imageHeight = document.getElementById(project_name+"_"+currentSelect).offsetHeight;
		
		$("#"+project_name+"_comp").animate({
			height: imageHeight
		},500,"easeOutExpo")
		
		$("#"+project_name+"_view").stop();
		$("#"+project_name+"_view").animate({
			height: Number(infoHeight) + Number(imageHeight)
		}, 500,"easeOutExpo");
		
		$(".arrowRightArea").css('height', imageHeight);
		$(".arrowLeftArea").css('height', imageHeight);
		
		
		$("#"+project_name+"_thumb_"+currentSelect).animate({
			'opacity': 1
		},500);
		
		slide_count = currentSelect;
		if(slide_total < 10){
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/0"+slide_total;
		} else if( slide_count > 10){
			document.getElementById(project_name+"_count").innerHTML = slide_count+"/"+slide_total;
		}else {
			document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/"+slide_total;
		}
	}
	
}
*/
function prevSlide(project_name, count_img, num_img){
	
	for(i=0; i<num_img; i++)
	{
		//$("#"+project_name+"_thumb_"+[i]).css('opacity', 0.1);
		$("#"+project_name+"_thumb_"+[i]).stop();
		$("#"+project_name+"_thumb_"+[i]).animate({
			"opacity": 0.1
		},speed,"easeOutExpo");
	}
	
	if(currentSlide > 0){
		currentSlide--;
		currentSelect--;
		//alert('nextslide: '+ currentSlide);
		$("#"+project_name+"_container").stop();
		$("#"+project_name+"_container").animate({
			'marginLeft': slideWidth*(-currentSlide)
		},speed,"easeOutExpo");
		var imageHeight = document.getElementById(project_name+"_"+currentSelect).offsetHeight;
		$("#"+project_name+"_comp").stop();
		$("#"+project_name+"_comp").animate({
			height: imageHeight
		},speed,"easeOutExpo")
		
		$("#"+project_name+"_view").stop();
		$("#"+project_name+"_view").animate({
			height: Number(infoHeight) + Number(imageHeight)
		}, speed,"easeOutExpo");
		$(".arrowRightArea").css('height', imageHeight);
		$(".arrowLeftArea").css('height', imageHeight);
		
		$("#"+project_name+"_thumb_"+currentSelect).stop();
		$("#"+project_name+"_thumb_"+currentSelect).animate({
			'opacity': 1
		},speed);
		
		slide_count = currentSelect;
		if(slide_total < 10){
			document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/0"+slide_total;
		} else if( slide_count > 10){
			document.getElementById(project_name+"_count").innerHTML = slide_count+"/"+slide_total;
		}else {
			document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/"+slide_total;
		}
	} else {
		currentSlide = currentSlide;
		//$("#"+project_name+"_thumb_"+currentSelect).css('opacity', 1);
		$("#"+project_name+"_thumb_"+currentSelect).stop();
		$("#"+project_name+"_thumb_"+currentSelect).animate({
			'opacity': 1
		},speed,"easeOutExpo");
		//alert('nextslide: first '+ currentSlide);
	}
	
	
}


function openView(project_title, project_name, num_img, id, imageHeight, total_img){
	
	for(i=0; i<projectList.length; i++)
	{
		
		$("#"+projectList[i][0]+"_view").stop();
		$("#"+projectList[i][0]+"_view").animate({
			height: "0px"
		}, speed,"easeOutExpo");
		
		
		
		$("#"+projectList[i][0]+"_overlay").stop();
		$("#"+projectList[i][0]+"_overlay").animate({
			width: "0px"
		}, speed,"easeOutExpo");
		$("#"+projectList[i][0]).mouseout(onOut);
		// reset container position
		$("#"+projectList[i][0]+"_container").css('marginLeft', "0px");
		
		
	};
	var txtWidth = $("#"+project_name+"_title").width();
	$("#"+project_name+"_overlay").stop();
		$("#"+project_name+"_overlay").animate({
			width: txtWidth
		}, speed,"easeOutExpo");
	$("#"+project_name).unbind('mouseout');
	
	//load project images
	for(j=1 ;j<num_img; j++){
		document.getElementById(project_name+"_"+j).src = projectList[id][j];
	}
	
	$("#"+project_name+"_view").stop();
	$("#"+project_name+"_view").animate({
		height: Number(infoHeight) + Number(imageHeight)
	}, speed,"easeOutExpo");
	
	$("#"+project_name+"_comp").stop();
	$("#"+project_name+"_comp").animate({
		height: imageHeight
	}, speed,"easeOutExpo");
	
	
	//wrap all images into container
	var imageWidth = 960;
	var images = $("."+project_name+"_image");
	images.wrapAll("<div id="+project_name+"_container></div>");
	images.css({ 'float' : 'left' });
	$("#"+project_name+"_container").css('width', imageWidth * num_img);
	
	$(".arrowRightArea").css('height', imageHeight);
	$(".arrowLeftArea").css('height', imageHeight);
	
	//
	select_id = id;
	key = true;
	slide_count = 01;
	slide_total = total_img;
	if(slide_total < 10){
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/0"+slide_total;
	} else {
		document.getElementById(project_name+"_count").innerHTML = "0"+slide_count+"/"+slide_total;
	}
	
		
	//reset
	currentSlide = 0;
	currentSelect = 1;
	$(".image_thumb").css('opacity', 0.1);
	
	//
	$("#"+project_name+"_thumb_1").css('opacity', 1);
	
	//scroll to
	var projectPos = 55;
	var newPos = id * projectPos + 72;
	//$(window).stop(true,true);
	//$(window).scrollTo(newPos+"px", 1000);
	//$(window).scrollTop(newPos);
	$("html, body").stop(true,true).animate({
		scrollTop: newPos
	},1500,"easeOutExpo");
	
	document.title = title +" / "+ project_title;
	document.location.hash = "_"+project_name;
	
};