// JavaScript Document
var previewPath = "images/preview/img";
var modelPath = "images/model/model";
var texturePath = "images/texture/texture";
var fileExt = new Array();
	fileExt["texture"] = ".png";
	fileExt["preview"] = ".png";
	fileExt["model"] = ".jpg";
var rotation = "2"; //default

var ROTATION_MIN = 1;
var ROTATION_MAX = 9;
var SLIDE_TIME = 850;
var FADE_IN_TIME = 2500;
var LIGHTBOX_OPACITY = 0.85;
var TEXTURE_TITLE_TEXT = "Click to View %s"; //"Click to slide %s";

var HOME = "index.html";

var textureLabels = new Array();
	textureLabels[0] = "Image Two";
	textureLabels[1] = "Image One";
var currentModel;

function changeImgRollover(id)
{
	//no rollover image for these
	if(("about" == id) || ("clients" == id) || ("resume" == id) || ("links" == id)) 
		return;
	$("img#imagerollover").attr('src', previewPath + id + fileExt["preview"]);
}

function changeModel(id)
{
	var fade = (arguments.length > 1) ? arguments[1] : true;
	//remember the current model (id)
	currentModel = id;
	//fadeout textures
	if(fade)
		fadeTextures("out");
	//change textures
	changeTextures(texturePath + id + "_1" + fileExt["texture"], texturePath + id + "_2" + fileExt["texture"],
	texturePath + id + "_1_full" + fileExt["texture"], texturePath + id + "_2_full" + fileExt["texture"]);
	//show texture
	if(fade)
		fadeTextures("in");
	
	$("#model img").attr('src', modelPath + id + "_" + rotation + fileExt["model"]);
	$("#model").attr('title', modelPath + id + "_" + rotation + fileExt["model"]);
}

function texture2IsVisible() {
  return (300 > parseInt($("#slide2").css("left")));
}

function texture2Click() {
  if(texture2IsVisible()) {
    return true;
  } else {
    toggleTextureArea();
    $('#slide2_link').addClass('lightbox');
    changeTextures(texturePath + currentModel + "_1" + fileExt["texture"], texturePath + currentModel + "_2" + fileExt["texture"],
      texturePath + currentModel + "_1_full" + fileExt["texture"], texturePath + currentModel + "_2_full" + fileExt["texture"]);
    setupLightboxEffect();
    return false;
  }
}

function toggleTextureArea()
{
	var currentTexture = "other Texture";
	 //toggle the display of texture panels
	 if(300 > parseInt($("#slide2").css("left")))  //texture 2 is showing
	 {
		$("#slide2").stop().animate({left:'368px'},{queue:false,duration:SLIDE_TIME});
		currentTexture = textureLabels[0];
	 }
	 else //texture 2 is hidden
	 {
	 	$("#slide2").stop().animate({left:'25px'},{queue:false,duration:SLIDE_TIME});
		currentTexture = textureLabels[1];
	 }
	$("#textures").attr('title', TEXTURE_TITLE_TEXT.replace(/(%s)/, currentTexture));
	$("#slide1").attr('backgroundImage', 'images/texture_slide1_hover.png');
}

function rotateModel()
{
	var rotation_dir = (0 == arguments.length) ? "LEFT" : arguments[0]; //assume left
	switch (rotation_dir.toLowerCase())
	{
		case "left":
			rotationDec();
		break;
		case "right":
			rotationInc();
		break;
	}
	changeModel(currentModel, false);
}

//inherently increment the rotation and check for overflow
function rotationInc()
{
	if(ROTATION_MAX > rotation) {
		rotation++;
	} else {
		rotation = ROTATION_MIN;
	}
	return rotation;
}

//decrement the rotation and check for underflow
function rotationDec()
{
	if(ROTATION_MIN < rotation) {
		rotation--;
	} else {
		rotation = ROTATION_MAX;
	}
	return rotation;
}

function changeTextures()
{
	$("#slide1 img").attr('src', arguments[0]);
	$("#slide2 img").attr('src', arguments[1]);
	//set href for images that represent the textures
  $("#slide1 a").attr('href', arguments[2]);
  if($("#slide2 a").hasClass("lightbox")) {
    $("#slide2 a").attr('href', arguments[3]);
  }
}

function fadeTextures()
{
	if(0 == arguments.length)
	{
		$("div.texture img").fadeIn(FADE_IN_TIME);
		return;
	}
	switch(arguments[0].toLowerCase())
	{
		case "in" :
			$("div.texture img").fadeIn(FADE_IN_TIME);
		break;
		case "out" :
			$("div.texture img").css('display', 'none');
//			$("div.texture img").fadeOut(0);
		break;
	}
}

//jquery preload images
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

//jquery - document load
$(document).ready(function(){
	//preload model (rotate) images - first one only in order to not increase page load time
	$(['images/model/modela_1.jpg','images/model/modela_2.jpg','images/model/modela_3.jpg','images/model/modela_4.jpg','images/model/modela_5.jpg','images/model/modela_6.jpg','images/model/modela_7.jpg','images/model/modela_8.jpg','images/model/modela_9.jpg']).preload();
	setupLightboxEffect();
	$('#lightbox img').attr('alt', 'Click to dismiss');
	$('#title').click(function() {
		window.location.href = HOME;
	});
	$("area").click(function()
	{
		var areaId = $(this).attr('id');
		changeModel(areaId);
	});
	$("#textures").click(toggleTextureArea);
	$("area").hover(function()
	{
		//for some reason, the FIRST image map area captures a rollover AFTER the one we want
		//so we will ignore it
		var areaId = $(this).attr("id");
		if ( "" != areaId)
			changeImgRollover(areaId);
	});
	

	$("#turn_btn_left")
		.click(function() {
			rotateModel('left');
		});
	$("#turn_btn_right")
		.click(function() {
			rotateModel('right');
		});
		
	//starting setup of the page
	changeImgRollover("a");
	changeModel("a");
	setTimeout(toggleTextureArea, 2100);
	
	//preload model (rotate) images - the others that need to be loaded
	$(['images/model/modelb_1.jpg','images/model/modelb_2.jpg','images/model/modelb_3.jpg','images/model/modelb_4.jpg','images/model/modelb_5.jpg','images/model/modelb_6.jpg','images/model/modelb_7.jpg','images/model/modelb_8.jpg','images/model/modelb_9.jpg']).preload();
	$(['images/model/modelc_1.jpg','images/model/modelc_2.jpg','images/model/modelc_3.jpg','images/model/modelc_4.jpg','images/model/modelc_5.jpg','images/model/modelc_6.jpg','images/model/modelc_7.jpg','images/model/modelc_8.jpg','images/model/modelc_9.jpg']).preload();
	$(['images/model/modeld_1.jpg','images/model/modeld_2.jpg','images/model/modeld_3.jpg','images/model/modeld_4.jpg','images/model/modeld_5.jpg','images/model/modeld_6.jpg','images/model/modeld_7.jpg','images/model/modeld_8.jpg','images/model/modeld_9.jpg']).preload();
	$(['images/model/modele_1.jpg','images/model/modele_2.jpg','images/model/modele_3.jpg','images/model/modele_4.jpg','images/model/modele_5.jpg','images/model/modele_6.jpg','images/model/modele_7.jpg','images/model/modele_8.jpg','images/model/modele_9.jpg']).preload();
	$(['images/model/modelf_1.jpg','images/model/modelf_2.jpg','images/model/modelf_3.jpg','images/model/modelf_4.jpg','images/model/modelf_5.jpg','images/model/modelf_6.jpg','images/model/modelf_7.jpg','images/model/modelf_8.jpg','images/model/modelf_9.jpg']).preload();

	$(['images/texture/texturea_1_full.png','images/texture/texturea_2_full.png', 'images/texture/texturea_1.png', 'images/texture/texturea_2.png']).preload();
	$(['images/texture/textureb_1_full.png','images/texture/textureb_2_full.png', 'images/texture/textureb_1.png', 'images/texture/textureb_2.png']).preload();
	$(['images/texture/texturec_1_full.png','images/texture/texturec_2_full.png', 'images/texture/texturec_1.png', 'images/texture/texturec_2.png']).preload();
	$(['images/texture/textured_1_full.png','images/texture/textured_2_full.png', 'images/texture/textured_1.png', 'images/texture/textured_2.png']).preload();
	$(['images/texture/texturee_1_full.png','images/texture/texturee_2_full.png', 'images/texture/texturee_1.png', 'images/texture/texturee_2.png']).preload();
	$(['images/texture/texturef_1_full.png','images/texture/texturef_2_full.png', 'images/texture/texturef_1.png', 'images/texture/texturef_2.png']).preload();
	
});