//**********************************************************************************************//
//  
//  CASA 
//
//  Version 2.1
//
//  Modified by 121 2008/12/01
//  Safari can load XML file
//  Thanks for Synook
//  http://w3schools.invisionzone.com/index.php?showtopic=18997
//
//  Modified by 121 2008/11/24
//  when click a setimg then change the itemspecs and prdimg
//
//  Created by 121  2008/11/17
//
//**********************************************************************************************//


//Declare variable for XML objects
var xmlObj;
var brandObj;
var productObj;
var modelNoObj;
var modelNameObj;
var specsObj;
var itemObj;
var currentNav = 0;

var navImgArr;
var setImgArr;
var prdImgArr
var itemsArr;

var $j = jQuery.noConflict();


//get the category to determine XML file to parse
function init(brand, category){
	if(brand=="carlhansen" && category=="chair"){
		parseXML("spec/chair.xml");
	}
	else if(brand=="carlhansen" && category=="table"){
		parseXML("spec/table.xml");
	}

	else if(brand=="kaikado" && category=="general"){
		parseXML("spec/general.xml");
	}
	else if(brand=="kaikado" && category=="new"){
		parseXML("spec/new.xml");
	}

	else if(brand=="zhanggeming" && category=="general"){
		parseXML("spec/general.xml");
	}
	else if(brand=="zhanggeming" && category=="limited"){
		parseXML("spec/limited.xml");
	}
	else if(brand=="zhanggeming" && category=="new"){
		parseXML("spec/new.xml");
	}
	
	else if(brand=="k" && category=="egon"){
		parseXML("../spec/egon.xml");
	}
	else if(brand=="k" && category=="gom"){
		parseXML("../spec/gom.xml");
	}
	else if(brand=="k" && category=="inei"){
		parseXML("../spec/inei.xml");
	}
	else if(brand=="k" && category=="irony"){
		parseXML("../spec/irony.xml");
	}
	else if(brand=="k" && category=="jdz"){
		parseXML("../spec/jdz.xml");
	}
	else if(brand=="k" && category=="kanazawa"){
		parseXML("../spec/kanazawa.xml");
	}
	else if(brand=="k" && category=="kcollection"){
		parseXML("../spec/kcollection.xml");
	}
	else if(brand=="k" && category=="metaph"){
		parseXML("../spec/metaph.xml");
	}
	else if(brand=="k" && category=="ojewel"){
		parseXML("../spec/ojewel.xml");
	}
	else if(brand=="k" && category=="pg"){
		parseXML("../spec/pg.xml");
	}
	else if(brand=="k" && category=="plpl"){
		parseXML("../spec/plpl.xml");
	}
	else if(brand=="k" && category=="silicone"){
		parseXML("../spec/silicone.xml");
	}
	else if(brand=="k" && category=="suki"){
		parseXML("../spec/suki.xml");
	}
	else if(brand=="k" && category=="tframe"){
		parseXML("../spec/tframe.xml");
	}




	/* 請把 /* and *\/ 拿掉才會有效
	//for example there is another category in the carlhansen called table
	//you can rename the chair or table if there is another brand also has chair or table
	//請輸入xml檔案內的brand name and category的名稱, 以及xml檔名
	else if(brand=="carlhansen" && category=="table"){
		parseXML("../lib/product/spec/table.xml");
	}
	*/
}


//get the xml file name and parse it to an object
function parseXML(xml)
{
	
	try //Internet Explorer
	{
		xmlDoc=new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(e)
	{
		try //Firefox, Mozilla, Opera, etc.
    	{
   			xmlDoc=new XMLHttpRequest();
    	}
  		catch(e) {alert(e.message)}
  	}

	try
  	{
  		xmlDoc.open("GET", xml, false); //Last parameter is for async mode
  		xmlDoc.onreadystatechange = function() {
  			if (xmlDoc.readyState == 4) {
    			//alert("xmlDoc is loaded, ready for use. XML can be read through the xmlDoc.responseXML property");
  			}
  		}
  		xmlDoc.send(null);
  	}
	catch(e) {alert(e.message)}
	
	
	xmlObj = xmlDoc.responseXML.documentElement;
	
	//variables for XML nodes
	brandObj = $j(xmlObj);
	productObj = $j(xmlObj).children('product');
	modelNoObj = $j(xmlObj).children('product').children('ModelNo');
	modelNameObj = $j(xmlObj).children('product').children('ModelName');
	specsObj = $j(xmlObj).children('product').children('Specs');
	itemObj = $j(xmlObj).children('product').children('ModelSets').children('item');
	
	//alert("item length is "+itemObj.length);
	
	setImgArr = new Array(itemObj.length - 1);
	prdImgArr = new Array(itemObj.length - 1);
	itemsArr = new Array(itemObj.length - 1);
	
	//load the first model name when this page loaded
	$j("#modelName").html($j(modelNameObj).eq(0).text());
  	
	//load navigation images
	loadNavImg();
  	
	//load the first spec when this page loaded
	changeSpecs('specs',0);

	//load set images for a product
	loadSetImg(0);
	
	checkWidth();
}  //end of parseXML function


function loadNavImg(){
	//get nav image path
	navImgPath = $j(brandObj).attr("navimg");
	
	//get numbers of product in this category
	imgLength = $j(productObj).length;
	
	//prepare navimg names for loading images
	//set an id as navImg+n and herf as javascript:changeNav(i) for a tag
	for(i=0; i<imgLength; i++)
	{	
		//arrNavImg[i]
		link = "../" + $j(brandObj).attr("name") + navImgPath + $j(modelNoObj).eq(i).text()+".jpg";
		aHref = "javascript:changeNav("+i+")";
		$j("#menu").append("<li><a id='"+"navImg"+i+"' href='"+aHref+"'><img src='"+link+"' / title='"+$j(modelNameObj).eq(i).text()+"'></a></li>");
		
		//set how many item(s) for each product
		itemsArr[i] = $j(xmlObj).children('product').eq(i).children('ModelSets').children('item').length;
	}
	
	//alert(itemsArr[0]);
	
	//append class as selected for the first li
	$j("#navImg0").addClass("selected");
	
}  //end of loadNavImg function

//change navImg class to selected
function changeNav(obj){
	//remove all class in all lis
	for (i=0; i<$j(productObj).length; i++)
	{
		id = "#navImg"+i;
		$j(id).removeClass("selected");
		//alert("Selected class in " + id + " has be removed");
	}
	
	//add class on the selected nav image
	newObj = "#navImg"+obj
	$j(newObj).addClass("selected");
	//alert("Selected class in " + obj + " has be added");
	
	//reload different product
	//change model name
	$j("#modelName").html($j(modelNameObj).eq(obj).text());
	
	//change specs
	changeSpecs('specs',obj);
	
	//load set images for a product
	currentNav = obj;
	loadSetImg(obj);
	scrollMe('left');
	checkWidth();
}

function loadSetImg(obj){
	//empty setimg p tag
	//$j("#gallery").empty;
	$j("#gallery").empty();
	
	//prepare images for setImg
	setImgPath = $j(brandObj).attr("setimg");
	prdImgPath = $j(brandObj).attr("prdimg");
	
	//alert("current item has "+itemsArr[0]+" item(s).");
	
	//start number
	if(currentNav == 0){
		startNum = 0;
		endNum = startNum + itemsArr[0];
	}
	else{
		endNum = 0;
		for(i=0; i<=currentNav; i++){
			endNum += itemsArr[i];
		}
		endNum = endNum;
		startNum = endNum - itemsArr[currentNav];
	}
	//alert("my current nav is " + currentNav + " start number is "+startNum+" and end number is "+endNum);
	
	
	for(i=startNum; i<endNum; i++){
		setImgArr[i] = new Image();
		setImgArr[i].src =  "../" + $j(brandObj).attr("name") + setImgPath + $j(itemObj).eq(i).attr('img');
		prdImgArr[i] = new Image();
		prdImgArr[i].src =  "../" + $j(brandObj).attr("name") + prdImgPath + $j(itemObj).eq(i).attr('img');

		javaScript = "javascript:changePrdimg("+i+")";
		
		//load all set-images in the prdimg p tag
		$j("#gallery").append("<li><a class='item' href='"+javaScript+"'><img class='thumb' src='"+setImgArr[i].src+"' /></a></li>");
		//$j("#gallery").append("<li><a class='item' href='"+javaScript+"'><img class='thumb' src='"+setImgArr[i].src+"' /></a></li>");
		//$j("#gallery").append("<li><a class='item' href='"+javaScript+"'><img class='thumb' src='"+setImgArr[i].src+"' /></a></li>");

	}
	
	//set default prd image is the first one
	changePrdimg(startNum);
}


//
function changePrdimg(obj){
	//
	//alert("obj is "+obj);
	if($j(itemObj).eq(obj).children('itemspec').text()==""){
		changeSpecs('specs', currentNav);
	}
	else{
		changeSpecs('itemspec', obj)
	}
	
	//set animation to proImg
	$j("#prodImg").fadeOut("slow",function(){$j("#prodImg").attr("src",prdImgArr[obj].src);});
	$j("#prodImg").fadeIn("slow");
}


//change specs
function changeSpecs(type, obj){
	var specsTxt = "";
	
	if(type=="specs"){
		thisItem = xmlObj.getElementsByTagName("Specs")[obj];
		
		for (k=0; k<thisItem.childNodes.length; k=k+2)
  		{
  			specsTxt += thisItem.childNodes[k].nodeValue;
		    if(k != thisItem.childNodes.length-1){ 
  		  		specsTxt += "<br />";	
  		  	}
  		}
  	}
  	else{
		thisItem = xmlObj.getElementsByTagName("itemspec")[obj];
		
  		for (k=0; k<thisItem.childNodes.length; k=k+2)
  		{
  			specsTxt += thisItem.childNodes[k].nodeValue;
		    if(k != thisItem.childNodes.length-1){ 
  		  		specsTxt += "<br />";	
  		  	}
  		}
  	}
  	
  	//put specs text on the specs paragraph
	$j("#specs").html(specsTxt);
}


//
function scrollMe(direction){
	if(direction =="left"){
		$j("#wrapper").stop().scrollTo( 0, {speed:500, axis: "x", queue:true} );
	}
	else{
		$j("#wrapper").stop().scrollTo( 300, {speed:1500, axis: "x", queue:true} );
	}
}

//
function checkWidth(){
	scrollMe('left');
	
	boxWidth = parseInt($j("#wrapper").css('width'));
	imageWidth = itemsArr[currentNav]*(45+6) ;
	//imageWidth = itemsArr[currentNav]*(45+6) * 3 ;
	
	if(boxWidth > imageWidth){
		//alert("boxWidth: "+boxWidth+" > imageWidth: "+imageWidth);
		$j('#moveleft').css('display','none');
		$j('#moveright').css('display','none');
	}
	else{
		//alert("boxWidth: "+boxWidth+" < imageWidth: "+imageWidth);
		$j('#moveleft').css('display','');
		$j('#moveright').css('display','');
	}
}