var currentElement;
	var elementParentNode;
	var spanNode;

	var productRefId;

	var currentProductRef;
	var currentProductRefArray;
	var currentProductRefsArrayDisplayed;
	var currentImageType;
	
	//var req;
	//var which;
	//var currentTarget;
	//var targetURL = window.location.href;
	//var mainURL = targetURL.substring(0,targetURL.lastIndexOf("/")+1);	
	//var mainURL = "http://localhost:8080/jaeger/";	
	var mainURL;
	
	var MyString = Class.create();
	MyString.prototype = {
		initialize: function(value){
			this.value = value.replace(/(^\s*)|(\s*$)/g, "");
		},
		trim: function() { 
			return this.replace(/(^\s*)|(\s*$)/g, ""); 
		},
		rtrim: function() {
		 chaine = unescape(this);
 		 return chaine.replace(/(\s*$)/, "");
		}
	}
	
	Object.extend(MyString.prototype, String);
	
	var productRefArray = new Array();
	var distinctAttributesArray = new Array();
		
	var ProductReference = Class.create();
	
	ProductReference.prototype = {
		initialize: function(refId,ref,codeCrmId,attributes,images){
			this.refId = refId;
			this.ref = ref;
			this.codeCrmId = codeCrmId;
			this.attributes = attributes;
			this.images = images;
		},
		
		findProductAttribute: function (name,value){
			var foundProductAttribute = false;
			this.attributes.each(
				function(anAttribute){
					if((anAttribute.name == name) && (anAttribute.value == value)){
						foundProductAttribute = true;
						throw $break;
					}
				}
			);
			return foundProductAttribute;
		},
			
		getAttribute: function (name){
			var foundProductAttribute;
			this.attributes.each(function(anAttribute){
				if(anAttribute.name == name){
					foundProductAttribute = anAttribute;
					throw $break;
				}
			});
			return foundProductAttribute;
		},
		
		getImage: function (name){
			var foundImage;
			this.images.each(function(anImage){
				if(anImage.name ==name){
					foundImage = anImage;
					throw $break;
				}
			});
			return foundImage;
		}
	}
	
	
	var ProductAttribute = Class.create();
	
	ProductAttribute.prototype = {
		initialize: function(name, value){
			this.name = name;
			this.value = value;
		}
	}
	
	var ProductImage = Class.create();
	
	ProductImage.prototype = {
		initialize: function(name, value){
			this.name = name;
			this.value = value;
		}
	}

	function setCurrentProductRef(productRef){
		currentProductRef = productRef;
	}


	function init(x){
		var elementName;
		var firstLiElement;
		var foundLiElement = false;
		var classNameValue = "active";
		mainURL = x;
		if (distinctAttributesArray.length==0){
			currentProductRef = productRefArray[0];
			currentProductRefArray = productRefArray;
			updateCurrentProductRefsArrayDisplayed();
			flipImage();
			updateProductSpecification();
		}	
		else{
			if (distinctAttributesArray.length > 1){
				classNameValue = "standard";
			}
			$A(distinctAttributesArray).each(
				function(anAttribute,index){
					elementChilds = $A($("ul_"+anAttribute[0]).childNodes);
					elementChilds.each(
						function(liElement){
							if(liElement.nodeName == "LI"){
								addObjEvent(liElement,'click',updateProductReferences,true);
								if(index==0 && !foundLiElement){
									firstLiElement = liElement;
									foundLiElement = true;
								}
							}
						}
					);					
				}
			);
			
			productRefId = getAttributeValueFromUrl("productRefId");
			//onclick li element: updateProductReferences();
			//onclick ul_REFERENCE: updateReference();
			if(productRefId == "") { //URL does not contain productRefId
				//distinctAttributesArray[0][0]: BOITIER
				//classNameValue: standard
				//new MyString(liSpanAttribute.firstChild.nodeValue).value: Yellow Gold
				liSpanAttribute = $("span_"+distinctAttributesArray[0][0]+"_0");
				updateProductRefsAttr("ul_"+distinctAttributesArray[0][0], classNameValue, new MyString(liSpanAttribute.firstChild.nodeValue).value);
				liSpanAttribute.className = "selected";
			} else {
				getSpecificProductReference(getAttributeValueFromUrl("productRefId"));	//set currentProductRef
				
				var countBoitier = countUntilAttrOccurence(0);
				liSpanAttribute = $("span_"+distinctAttributesArray[0][0]+"_"+countBoitier);
				
				var countBracelet = countUntilAttrOccurence(1);
				updateProductRefsAttr("ul_"+distinctAttributesArray[0][0], classNameValue, currentProductRef.attributes[0].value);	
				
				liSpanAttribute.className = "selected";
				
				currentElement = $("li_"+distinctAttributesArray[1][0]+"_"+countBracelet);
				updateProductReferences(); //li element
				
				if(currentProductRef.ref.indexOf("Q")) {
					productRefId = getAttributeValueFromUrl("productRefId");
					currentElement = $("li_REFERENCE_"+productRefId);
					updateReference();	//ul_REFERENCE
				}
			}
		}			
	}

	function getAttributeValueFromUrl(attribute) {
  		var regexS = "[\\?&]"+attribute+"=([^&#]*)";
  		var regex = new RegExp( regexS );
  		var tmpURL = window.location.href;
  		//var tmpURL = "http://localhost:8080/jaeger/";
  		var results = regex.exec( tmpURL );
  		if( results == null )
    		return "";
  		else
    		return results[1];
	}

	function getSpecificProductReference(value){
		$A(productRefArray).each(
			function(aProductRef){
				if (aProductRef.refId == value){
					currentProductRef = aProductRef;
					throw $break;
				}
			}
		);
	}
	
	function countUntilAttrOccurence(attrNumber){
		var counter = 0;
		$A(distinctAttributesArray[attrNumber][1]).each(
			function(aProductAttr){
				if (aProductAttr == currentProductRef.attributes[attrNumber].value){
					throw $break;
				} else {
					counter++;
				}
			}
		);
		return counter;
	}
	
	function updateProductRefsAttr(ulElementName, classNameValue, attributeValue){
		//alert("1.- resetAttributesClassName("+ulElementName+","+classNameValue+");");
		resetAttributesClassName(ulElementName,classNameValue);
		//alert("2.- setCurrentProductRefArray("+attributeValue+");");
		setCurrentProductRefArray(attributeValue);
		//alert("3.- setActiveAttributes("+attributeValue+");");
		setActiveAttributes(attributeValue);
		//alert("4.- updateProductReferenceDisplay();");
		updateProductReferenceDisplay();
		finalizeInterface();
	}

	function addObjEvent(obj, evType, fn, useCapture){
  		if (obj.addEventListener){
    		obj.addEventListener(evType, fn, useCapture);
    		return true;
  		} else if (obj.attachEvent){
    		var r = obj.attachEvent("on"+evType, fn);
    		return r;
  		} else {
    		alert("Handler could not be attached");
  		}
	}
		
	function removeEvent(obj, evType, fn, useCapture){
	  if (obj.removeEventListener){
	    obj.removeEventListener(evType, fn, useCapture);
	    return true;
	  } else if (obj.detachEvent){
	    var r = obj.detachEvent("on"+evType, fn);
	    return r;
	  } else {
	    alert("Handler could not be removed");
	  }
	}

	function retrieveURL(url,containerId){
		//alert('url pour ajax : '+url);
		var ajaxElement = new Ajax.Updater(containerId, url, { method: 'get', onComplete: finalizeInterface});
	}
		
   	function updateReference(){
		var aProductRef;
		if (window.event){
			currentElement = event.srcElement;
			spanNode = currentElement;
			elementParentNode = event.srcElement.parentNode.parentNode;
		} else if (productRefId == ""){
			currentElement = this;
			spanNode = currentElement.firstChild;
			elementParentNode = this.parentNode;
		}
		else{	//productRefId != ""
			spanNode = currentElement.firstChild;
			elementParentNode = currentElement.parentNode;
			productRefId = "";
		}
		parentNodeId = 	elementParentNode.id;
		attributeValue = spanNode.firstChild.nodeValue;
		
		resetAttributesClassName("ul_REFERENCE","active");
		spanNode.className = "selected";
		$A(currentProductRefsArrayDisplayed).each(
			function(aProductRef){
				if(aProductRef.ref == attributeValue){
					currentProductRef = aProductRef;
					throw $break;
				}
			}
		);
		flipImage();
		updateProductSpecification();
	}
			
	function updateProductSpecification(){
		try{
			retrieveURL(mainURL+"viewProductSpecification.do?productRefId="+currentProductRef.refId,"div_techSpecs");
		} catch (e) {
   			alert(e);
   		}
 	}
			
	function updateProductReferences(){
		var elementParentNode;
		var spanNode;
		if (window.event){
			currentElement = event.srcElement;
			spanNode = currentElement;
			elementParentNode = event.srcElement.parentNode.parentNode;
		}
		else if (productRefId == ""){
			currentElement = this;
			spanNode = currentElement.childNodes[0];
			elementParentNode = this.parentNode;			
		}
		else{ //productRefId != ""
			spanNode = currentElement.childNodes[0];
			elementParentNode = currentElement.parentNode;
			productRefId = "";
		}
		parentNodeId = 	elementParentNode.id;
		/*To be changed if the node id is changed*/
		attributeName = parentNodeId.substring(3,parentNodeId.length);
		//spanNode = currentElement.childNodes[1];
		
		attributeValue = new MyString(spanNode.firstChild.nodeValue).value;
		if (distinctAttributesArray.length == 1){
				updateProductRefsAttr("ul_"+distinctAttributesArray[0][0],"active",attributeValue);
				spanNode.className = "selected";
				setProductReference(attributeValue);
				updateProductReferenceDisplay();
		}
		else if (distinctAttributesArray.length == 2){
			if (attributeName == distinctAttributesArray[0][0]){
				updateProductRefsAttr("ul_"+distinctAttributesArray[0][0],"standard",attributeValue);
				spanNode.className = "selected";
			}
			else if (attributeName == distinctAttributesArray[1][0] && spanNode.className == 'active'){
				changeSelectedToActive("ul_"+distinctAttributesArray[1][0]);
				setProductReference(attributeValue);
				updateProductReferenceDisplay();
			}
		}
		if (spanNode.className != "no"){
			spanNode.className = "selected";
		}
	}
							
	function resetAttributesClassName(ulElementName, classNameValue){
		ulElement = $(ulElementName);
		$A(ulElement.childNodes).each(
			function(liElement){
				if (liElement.nodeName== "LI"){
					$A(liElement.childNodes).each(
						function(liChild){
							if (liChild.nodeName == "SPAN"){
								liChild.className = classNameValue;
							}
						}
					);
				}
			}
		);
	}
	
	function setCurrentProductRefArray(value){
		currentProductRefArray = new Array();
		//var productRef ;
		$A(productRefArray).each(
			function(aProductRef){
				if (aProductRef.findProductAttribute(distinctAttributesArray[0][0],value)){
					currentProductRefArray.push(aProductRef);
				}
			}
		);
		currentProductRef = currentProductRefArray[0];
	}
			
	function setProductReference(value){
		var distArrayIndex = 0;	
		if (distinctAttributesArray.length>1){
			distArrayIndex=1;
		}
		$A(currentProductRefArray).each(
			function(aProductRef){
				if (aProductRef.findProductAttribute(distinctAttributesArray[distArrayIndex][0],value)){
					currentProductRef = aProductRef;
					throw $break;
				}
			}
		);
	}
	
	function updateCurrentProductRefsArrayDisplayed(){
		currentProductRefsArrayDisplayed = new Array();
		var productRef;
		//var distArrayIndex = 0;	
		var hasSameAttributes = true;
		$A(currentProductRefArray).each(
			function (aProductRef){
				hasSameAttributes = true;
				$A(distinctAttributesArray).each(					
					function(anAttribute){
						hasSameAttributes = hasSameAttributes && aProductRef.findProductAttribute(anAttribute[0], currentProductRef.getAttribute(anAttribute[0]).value);
					}
				);
				if (hasSameAttributes){
					currentProductRefsArrayDisplayed.push(aProductRef);
				}
			}
		);
		
		var ulElement = $("ul_REFERENCE");
		ulElement.update(' ');
		ulElement.empty();
		
		var liElement;
		var spanElement;
		var textElement;
		$A(currentProductRefsArrayDisplayed).each(
			function(aProductRef, index){
				liElement = document.createElement('LI');
				spanElement = document.createElement('SPAN');
				liElement.setAttribute("id", "li_REFERENCE_"+aProductRef.refId);
				spanElement.setAttribute("id", "span_REFERENCE_"+index);
				textElement = document.createTextNode(aProductRef.ref);
				spanElement.appendChild(textElement);
				liElement.appendChild(spanElement);
				addObjEvent(liElement,'click',updateReference,true);
				ulElement.appendChild(liElement);
			}
		);
		spanElement = $("span_REFERENCE_0");
		spanElement.className = "selected";
	}
	
	function setActiveAttributes(value){
		var distArrayIndex = 0;	
		if (distinctAttributesArray.length>1){
			distArrayIndex=1;
			resetAttributesClassName("ul_"+distinctAttributesArray[distArrayIndex][0],"no");
		}
		ulElement = $("ul_"+distinctAttributesArray[distArrayIndex][0]);
		ulElementChilds = $A(ulElement.childNodes);
		$A(currentProductRefArray).each(
			function(aProductRef){
				prodAttribute = aProductRef.getAttribute(distinctAttributesArray[distArrayIndex][0],value);
				ulElementChilds.each(
					function(liElement){
						if(liElement.nodeName == "LI"){
							$A(liElement.childNodes).each(
								function(liElementChild){
									if (liElementChild.nodeName == "SPAN" && 
										liElementChild.className != "active" &&
										prodAttribute.value == new MyString(liElementChild.firstChild.nodeValue).value
									){
										liElementChild.className = "active";
									}
								}
							);
						}
					}
				);
			}
		);
	}

	function changeSelectedToActive(ulElementName){
		ulElement = $(ulElementName);
		ulElementChilds = $A($(ulElementName).childNodes);
		ulElementChilds.each(
			function (anUlChildElement){
				if (anUlChildElement.nodeName == "LI"){
					$A(anUlChildElement.childNodes).each(
						function(aLiChildElement){
							if (aLiChildElement.nodeName == "SPAN" &&
								aLiChildElement.className == 'selected'){
								aLiChildElement.className = 'active';
								throw $break;
							}
						}
					);
				}
			}
		);
	}
	
	function updateProductReferenceDisplay(){
		var distArrayIndex = 1;	
		if (distinctAttributesArray.length<2){distArrayIndex=0;}
		var watchBoxNodes = $('watchBox').childNodes;
		var imgNode = watchBoxNodes[1];
		
		ulElement = $("ul_"+distinctAttributesArray[distArrayIndex][0]);
		ulElementChilds = $A($("ul_"+distinctAttributesArray[distArrayIndex][0]).childNodes);
		
		ulElementChilds.each(
			function(aNode){
				if (aNode.nodeName == "LI"){
					$A(aNode.childNodes).each(
						function (aLiChildNode){
							if (aLiChildNode.nodeName == "SPAN"){
								spanNodeValue = aLiChildNode.firstChild.nodeValue;
								attributeItem = currentProductRef.getAttribute(distinctAttributesArray[distArrayIndex][0]);
								if(attributeItem.value == new MyString(spanNodeValue).value){
									aLiChildNode.className = 'selected';
									throw $break;
								}
							}
						}
					);
				}	
			}
		);
		
		updateCurrentProductRefsArrayDisplayed();
		flipImage();
		updateProductSpecification();
	}
	
	function flipImage(){
			var watchBoxNodes = $('watchBox').childNodes;
			var imgNode = watchBoxNodes[0];
			
			var img_front = "IMAGEFRONT";
			var img_back  = "IMAGEBACK";
			currentImageType = img_front;
				
			var displayImage = currentProductRef.getImage(currentImageType);
			
			if (imgNode.nodeName !='IMG'){
				var imageElement = document.createElement('IMG');
				imageElement.setAttribute("id", "watchBoxImage");
				imageElement.setAttribute("src", path+displayImage.value);
				$('watchBox').insertBefore(imageElement,imgNode);
				
				var imageElement2 = document.createElement('IMG');
				imageElement2.setAttribute("src", "img/global/nullimage.gif");
				imageElement2.setAttribute("id", "watchBoxNullImage");
				$('mainContent').appendChild(imageElement2);
			}
			else{
				imgNode.src = path+displayImage.value;
			}
			
			displayImage = currentProductRef.getImage(img_back);
			watchBoxBackStyle = "watchBoxBackHid";
			
			var watchBoxBackDiv = $('watchBoxBack');
			watchBoxBackText = '';
			if(displayImage !=null){
				watchBoxBackStyle = "watchBoxBackVis";
				watchBoxBackDiv.className= watchBoxBackStyle;
				watchBoxBackText = watchBoxTextBack;
			}
			
			if(watchBoxBackDiv.firstChild){
				watchBoxBackDiv.firstChild.nodeValue = watchBoxBackText;
			}
			else{
				watchBoxBackDiv.appendChild(document.createTextNode(watchBoxBackText));
			}
			
		}	
		
  	function flipImageAction(){
		var watchBoxBackDiv = $('watchBoxBack');
		var imgNode = $('watchBox').childNodes[0];
		var displayImage;
		var img_front = "IMAGEFRONT";
		var img_back  = "IMAGEBACK";
		
		if (currentImageType == img_front){
			watchBoxBackText = watchBoxTextFront;
			displayImageType = img_back;
			
		}
		else if(currentImageType == img_back){
			watchBoxBackText = watchBoxTextBack;
			displayImageType = img_front;
		}
		
		displayImage = currentProductRef.getImage(displayImageType);
		if (imgNode.nodeName !='IMG'){
			var imageElement = document.createElement('IMG');
			imageElement.setAttribute("src", path+displayImage.value);
			$('watchBox').insertBefore(imageElement,imgNode);
		}
		else{
			imgNode.src = path+displayImage.value;
		}
		
		if(watchBoxBackDiv.firstChild){
			watchBoxBackDiv.firstChild.nodeValue = watchBoxBackText;
		}
		else{
			watchBoxBackDiv.appendChild(document.createTextNode(watchBoxBackText));
		}
		currentImageType = displayImageType;
	}
	
  	function MorphEffect(element,elementText1,elementText2){
	       new Effect.Morph(element, {style:'height:420px;font-size:12px;', duration:0.5});
	       new Effect.BlindDown(elementText1, 1);
	       new Effect.BlindDown(elementText2, 1);
	       }
  	function MorphEffectExit(element,elementText1,elementText2){
	       new Effect.BlindUp(elementText2, 0.5);
	       new Effect.BlindUp(elementText1, 0.5);
	       new Effect.Morph(element, {style:'height:0px;font-size:0px;', duration:1});
	       }