var ProductZoomImg = Class.create({
	
	initialize: function (flashUrl, inner,flashW,flashH,type,imgProd1,imgProd2,imgSitu1,imgSitu2) {
		this.flashUrl = flashUrl;
		this.inner = inner;
		this.flashW = flashW;
		this.flashH = flashH;
		this.type = type;
		this.id = inner.id.substring(inner.id.length-1,inner.id.length);
		this.idNav = 0;
		this.idSubNav = 0;
		this.left = new Array();
		this.right = new Array();
		
		this.imgProd1 = imgProd1;
		this.imgProd2 = imgProd2;
		this.imgSitu1 = imgSitu1;
		this.imgSitu2 = imgSitu2;
	},
	
	addProductLeft: function (img,imgSmall,imgBig) {
		this.left.push({img:img,imgSmall:imgSmall,imgBig:imgBig});
	},
	
	addProductRight: function (img,imgSmall,imgBig) {
		this.right.push({img:img,imgSmall:imgSmall,imgBig:imgBig});
	},
	
	write: function (target) {
		
		// force to right menu
		if(this.left.length <= 0 && this.right.length > 0) {
			target = "right";
		}
		
		this.idLabelData = (target) ?target :"left";		
		var str = '';
		var strNav = '';
		this.idSubNav = 0;
		var typeAdd = (this.type == 'pro')? '/pro' : '';
		
		if (!$(this.id+'navProduct')) {
			this.inner.innerHTML = '<div id="'+this.id+'navProduct"></div><div id="'+this.id+'contentProduct"></div>';
			strNav += '<ul class="nav">';
			if(this.left.length > 0) {
				strNav += '<li class="on"><p><a href="#0"><img src="'+this.imgProd1+'" lang="'+this.imgProd2+'" width="48" height="9" alt="Produit" /></a></p></li>';
			}
			if(this.right.length > 0) {
				strNav += '<li><p><a href="#0"><img src="'+this.imgSitu1+'" lang="'+this.imgSitu2+'" width="128" height="9" alt="Produit en situation" /></a></p></li>';
				
				if(this.left.length <= 0) {
					this.idNav = 1;
				}
			}
			strNav += '</ul>';
			
			$(this.id+'navProduct').innerHTML = '';
			
			$(this.id+'navProduct').innerHTML = strNav;
			this.navNodes = $$('#'+this.id+'navProduct a');
			for (var i=0;i<this.navNodes.length;i++) {
				this["navRoll"+i] = new RollCMS(this.navNodes[i]);
				// turn on default button
				if(this.idNav == i) {
					this["navRoll"+i].manual(1);
				}
				this["navRoll"+i].lock();
				Event.observe(this.navNodes[i],'click',this.navClick.bind(this,i));
			}
		}
		
		str += '<div class="visulist">';
			str += '<ul>';
			for (var i=0;i<this[this.idLabelData].length;i++) {
				var className = (i==0) ?' class="on"' :'';
				str += '<li'+className+'><a href="#0">&nbsp;</a><img src="'+this[this.idLabelData][i].img+'" width="26" height="26" alt="" /></li>';
			}
			str += '</ul>';
			str += '<div class="clear"></div>';
		str += '</div>';
		str += '<div class="visu">';
			str += '<div id="'+this.id+'visuProductZoom" class="visuProductZoom"></div>';
		str += '</div>';
		
		$(this.id+'contentProduct').innerHTML = str;		
		this.writeFlash();
		
		this.navSubNodes = $$('#'+this.id+'contentProduct a');
		for (var i=0;i<this.navSubNodes.length;i++) {
			Event.observe(this.navSubNodes[i],'click',this.navSubClick.bind(this,i));
		}
		
	},
	
	writeFlash: function () {
		this.flashZoom = new Flash (this.flashUrl+'?urlVisuSmall='+this[this.idLabelData][this.idSubNav].imgSmall+'&amp;urlVisuBig='+this[this.idLabelData][this.idSubNav].imgBig,this.id+'visuProductZoomFlash',this.flashW,this.flashH, [{name:'wmode',value:'transparent'}]);
		this.flashZoom.write(this.id+"visuProductZoom");
		if (this.idLabelData=='right') {
			this.flashZoom.resize(556,292);
		}
	},
	
	navClick: function (id) {
		if (id!=this.idNav) {
			this["navRoll"+this.idNav].manual(0);
			this["navRoll"+id].manual(1);
			Element.addClassName($(this.id+'navProduct').getElementsByTagName("li")[id],'on');
			Element.removeClassName($(this.id+'navProduct').getElementsByTagName("li")[this.idNav],'on');
			var targetWrite = (id==0) ?"left" :"right";
			this.write(targetWrite);
			this.idNav = id;
		}
	},
	
	navSubClick: function (id) {
		if (id!=this.idSubNav) {
			Element.addClassName(this.navSubNodes[id].parentNode,'on');
			Element.removeClassName(this.navSubNodes[this.idSubNav].parentNode,'on');
			this.idSubNav = id;
			this.writeFlash();
		}
	}

});