var x = 0;
var curPage = 0;  
var thumbWidth = 	160;  
var thumbsVis = 2;

var active_id = 1;

$(document).ready(function() {
  
  //$(".sub").hide();
  $("#main-mask").addClass("js");
  //Get OS
  var os = navigator.platform;
  if(os.toLowerCase().search("mac") > -1) {
    $("body").addClass("mac");
  }
  
  //Side scrolling
	$(".jump").click(function() {
	  attrHref = $(this).attr("href");
	  duration = 2000;
	  attrid = $(this).attr("id");
	  if (attrHref == "#main") 
	  { 
	  	goLeft = 0; 
		if(attrid == "contact_link1")
			duration = 3601;
	  } 
	  else if (attrHref == "#menu") 
	  { 
	  
			goLeft = -3601; 
		
	  }
	  else if (attrHref == "#contact") 
	  { 
	  	goLeft = -6601;
		if(attrid == "home_link2")
			duration = 3000;
		
	  }
	  
	  
    $(attrHref).show();
    if($("#about_div").attr("class") == "open") {
      $("#about_div").slideToggle({ duration: 1000, easing: "expoinout" });
      $("#about_div").toggleClass("open");
    }
	
		$("#main-scroll").animate({ left: goLeft }, duration, "expoinout", function(){
		  //callback animation is done
		  //alert("callback");
		 /* if (goLeft == 0) { 
			$(".sub").hide();
			$("#jobs-inner").css({ left: 100 });
		  }*/
		});
		return false;
	});//end of jump click
	
	//about slide down
	$("#close, #about_link_click").click(function() {
	 
	  $("#about_div").toggleClass("open");
	  $("#about_div").slideToggle({ duration: 1000, easing: "expoinout" });
	  return false;
	});
	
	
	
	
	//mouse-over on Home Page
	
	$("#about_link").mouseover(function(){
      $("#about_link").addClass("selected");
	   $("#menu_direction_home").removeClass("direction_right");
	  $("#menu_direction_home").addClass("direction_up");
    });
	
	$("#about_link").mouseout(function(){
      $("#about_link").removeClass("selected");
	  $("#menu_direction_home").removeClass("direction_up");
	  $("#menu_direction_home").addClass("direction_right");
    });
	
	$("#menu_link").mouseover(function(){
      $("#menu_link").addClass("selected");
    });
	
	$("#menu_link").mouseout(function(){
      $("#menu_link").removeClass("selected");
    });
	
	$("#contact_link").mouseover(function(){
      $("#contact_link").addClass("selected");
    });
	
	$("#contact_link").mouseout(function(){
      $("#contact_link").removeClass("selected");
    });
	
	
	//mouse-over on Menu Page
	
	$("#div_contact_link1").mouseover(function(){
      $("#div_contact_link1").addClass("selected");
    });
	
	$("#div_contact_link1").mouseout(function(){
      $("#div_contact_link1").removeClass("selected");
    });
	
	$("#home_link1").mouseover(function(){
      $("#home_link1").addClass("selected");
	  $("#menu_direction").removeClass("direction_right");
	  $("#menu_direction").addClass("direction_left");
	 
    });
	
	$("#home_link1").mouseout(function(){
      $("#home_link1").removeClass("selected");
	  $("#menu_direction").removeClass("direction_left");
	  $("#menu_direction").addClass("direction_right");
	 
    });
	
	
	//mouse-over on Contact Page
	
	$("#div_menu_link2").mouseover(function(){
      $("#div_menu_link2").addClass("selected");
    });
	
	$("#div_menu_link2").mouseout(function(){
      $("#div_menu_link2").removeClass("selected");
    });
	
	$("#home_link2").mouseover(function(){
      $("#home_link2").addClass("selected");
    });
	
	$("#home_link2").mouseout(function(){
      $("#home_link2").removeClass("selected");
    });
	
	
	//gallery effect
	
	$(".image_link").click(function() {
		  attrHref = $(this).attr("href");
		  thisclass = $(this).attr("class");
		  active_class = $("#image_link"+active_id).attr("class");
		  //alert(thisclass &" "& active_class)
		  
		  thisid = attrHref.substr(1, 1);
		 
		  $("#image_link"+active_id).removeClass(active_class);
		  $("#image_link"+active_id).addClass("image_link");
		  
		  $(this).removeClass(thisclass);
		  $(this).addClass("image_link_selected");
		  
		  $("#gallery_image"+ active_id).fadeOut(1000, function () {
				$("#gallery_image"+ thisid).fadeIn("slow");
		  });
		  
		  active_id = thisid;
		  
		  /*
		  for (i= 1; i <= 3; i++)
		  {
			  if(i != parseInt(thisid))
			  {	 
			  	//alert("remove "+i); 
				//alert($("#gallery_image"+ i).fadeOut("slow");
				//document.getElementById("gallery_image"+ i).className = "hidden";
				//alert($("#gallery_image"+ i).attr("class"));
				//$("#gallery_image"+ i).addClass("hidden");	
				$("#gallery_image"+ i).fadeOut("slow");
			  }
		  }
		 */
		 /*
		  alert(thisid);
		  $("#gallery_image"+ thisid).toggleClass("shown");
	  	  $("#gallery_image"+ thisid).slideToggle({ duration: 1000, easing: "expoinout" });
		  */
		 //$("#gallery_image"+ i).fadeOut("slow");
		 //$("#gallery_image"+ thisid).fadeIn("slow");
		 
		  return false;
	});
	
	
	
	/*
	//Job load
	$("#jobs-list a, #main-list a").click(function(){
	  $("#jobs-list a[@class=cur]").removeClass("cur");
  	$(this).addClass("cur");
    $("#jobs-content").load("jobs/"+$(this).attr("rel")+".html");
    $("#jobs-content").slideDown(500);
    return false;
	});
	
	//Work popup
	$("#work-scroll a, .pop, #design-shots a").click(function() {
	  window.open($(this).attr("href"), "newWin");
	  return false;
	});
	
  //Work Scroller
	var numThumbs = $("#work-scroll img").length;
	
	$("#next").click(function() { 
		updateOffset(1,numThumbs);
		$("#work-scroll").animate({ left: x }, 1000, "expoinout");	
		return false;
	});
	$("#prev").click(function() { 
		updateOffset(0,numThumbs);
		$("#work-scroll").animate({ left: x }, 1000, "expoinout");
		return false;
	});	
	*/
});// end doc ready


function updateOffset(next,thumbs) {
	if(next == 1) {
		if (x == (0 - ((thumbs - thumbsVis) * thumbWidth))) {
			x = 0;
		} else {
			x = x - (thumbWidth*thumbsVis);
		}
	}
	if(x <= 0 && next != 1) {
		if (x == 0) {
			x = (0 - ((thumbs - thumbsVis) * thumbWidth));
		} else {
			x = x + (thumbWidth*thumbsVis);
		}
	}
	
}// end updateOffset

/*****************************************************General function********************************************/
function renderDiv(height)
{
	document.write("<div style=\"height:"+ height +"px; font-size: 1px;\"></div>");
}
//end of function

function renderColumn(width, height)
{
	document.write("<div style=\"width:"+ width +"px; height:"+ height +"px; font-size: 1px; float:left; \"></div>");
}
//end of function

var selected_nav 
selected_nav = 1

function openMenu(openId)
{
	for(i = 1; i <= 5 ; i++)
		document.getElementById("category"+i).className = "hidden";
	
	document.getElementById("menu_nav_"+selected_nav).className = "medium_white";	
	document.getElementById("menu_nav_"+openId).className = "medium_white_ul";	
	selected_nav = openId;
	
	document.getElementById("category"+openId).className = "shown";	
	document.getElementById("menu_picture").src = "images/pic_btn_"+ openId +".jpg";	
	
}

function displayAbout(id)
{
	if(id == 1)
	{
		document.getElementById('click_about1').className = 'very_dark_grey_bold';	
		document.getElementById('about_1').className = 'shown';	
		document.getElementById('about_text_content').className = 'full';
		document.getElementById('about_picture').className = 'hidden';
		
		document.getElementById('click_about2').className = 'light_grey';	
		document.getElementById('about_2').className = 'hidden';	
		document.getElementById('about_pic_2').className = 'hidden';
		
		document.getElementById('click_about3').className = 'light_grey';	
		document.getElementById('about_3').className = 'hidden';
		document.getElementById('about_pic_3').className = 'hidden';
		
		document.getElementById('click_about4').className = 'light_grey';	
		document.getElementById('about_4').className = 'hidden';	
		document.getElementById('about_pic_4').className = 'shown';
		
	}
	else if(id == 2)
	{
		document.getElementById('click_about2').className = 'very_dark_grey_bold';	
		document.getElementById('about_2').className = 'shown';	
		document.getElementById('about_pic_2').className = 'shown';	
		document.getElementById('about_text_content').className = 'partial';
		document.getElementById('about_picture').className = 'full';
		
		document.getElementById('click_about1').className = 'light_grey';	
		document.getElementById('about_1').className = 'hidden';	
		
		document.getElementById('click_about3').className = 'light_grey';	
		document.getElementById('about_3').className = 'hidden';
		document.getElementById('about_pic_3').className = 'hidden';
		
		document.getElementById('click_about4').className = 'light_grey';	
		document.getElementById('about_4').className = 'hidden';	
		document.getElementById('about_pic_4').className = 'hidden';

	}
	else if(id == 3)
	{
		document.getElementById('click_about3').className = 'very_dark_grey_bold';	
		document.getElementById('about_3').className = 'shown';	
		document.getElementById('about_pic_3').className = 'shown';	
		document.getElementById('about_text_content').className = 'partial';
		document.getElementById('about_picture').className = 'full';
		
		document.getElementById('click_about1').className = 'light_grey';	
		document.getElementById('about_1').className = 'hidden';	
		
		document.getElementById('click_about2').className = 'light_grey';	
		document.getElementById('about_2').className = 'hidden';	
		document.getElementById('about_pic_2').className = 'hidden';
		
		document.getElementById('click_about4').className = 'light_grey';	
		document.getElementById('about_4').className = 'hidden';	
		document.getElementById('about_pic_4').className = 'hidden';	
		
	}
	else if(id == 4)
	{
		document.getElementById('click_about4').className = 'very_dark_grey_bold';	
		document.getElementById('about_4').className = 'shown';	
		document.getElementById('about_pic_4').className = 'shown';
		document.getElementById('about_text_content').className = 'partial';
		document.getElementById('about_picture').className = 'full';
		
		document.getElementById('click_about1').className = 'light_grey';	
		document.getElementById('about_1').className = 'hidden';	
		
		document.getElementById('click_about2').className = 'light_grey';	
		document.getElementById('about_2').className = 'hidden';	
		document.getElementById('about_pic_2').className = 'hidden';
		
		document.getElementById('click_about3').className = 'light_grey';	
		document.getElementById('about_3').className = 'hidden';
		document.getElementById('about_pic_3').className = 'hidden';

	}
	
	
}