• Meta

  Added over 1 year ago

• Categories

  • Slider
  • Navigation
  • Scrolling
  • Keyboard

• Links of interest

  1. Original Source
  2. Easing jQuery Plugin
  3. scrollTo jQuery Plugin
  4. Cycle jQuery Plugin

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;

};

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;
	
};