var validator;
var theForm;
var contenido;
var close;
var cont3;
var presentsSlider;
var flagHand, imgflagHand, imgFlag, flagFx, flagInfo, flagOpen=false;

var tabs = {
	disabled: false,
	handles: [],
	elements: [],
	previous: false,
	current: false,
	show: function(i){
		if(this.current!==i && !this.disabled){
			this.disabled=true;
			this.previous=this.current; 
			this.current=i;
			for(var j=0;j<this.handles.length;j++){
				if(j===this.current){
					this.handles[j].addClass('active');
					this.elements[j].setOpacity(0).setStyle('z-index',2).removeClass('hidden');
				}else{
					this.handles[j].removeClass('active');
					if(j===this.previous){this.elements[j].setStyle('z-index',1);}
					else{this.elements[j].addClass('hidden').setStyle('z-index',0).setOpacity(1);}
				}
			}
			var inCurrent = new Fx.Tween(this.elements[i],'opacity',{onComplete:function(){tabs.disabled=false;}});
			if(this.previous===false){
				inCurrent.start(0,1);
			}else{
				new Fx.Tween(this.elements[this.previous],'opacity',{onComplete:function(){inCurrent.start(0,1);}.bind(this)}).start(1,0);
			}
		}
	}
};

var actions = {
	print: function(){
		if(!tabs.disabled){
			window.print();
		}
	},
	highres: function(){
		if(!tabs.disabled){
			if(type==1){
				downloadFile('download/boxhigh/','box');
			}else{
				downloadFile('download/high/','presentacion',flag);
			}
		}
	},
	lowres: function(){
		if(!tabs.disabled){
			if(type==1){
				downloadFile('download/boxlow/','box');
			}else{
				downloadFile('download/low/','presentacion',flag);
			}
		}
	},
	mail: function(){
		if(!tabs.disabled){
			
			contenido.removeClass('hidden');
			contenido.inject(document.body);
			close.addEvent('click',function(){contenido.fade('out')});
			
			contenido.setOpacity(0).fade('in');
		}
	},
	fotos: function(){
		if(!tabs.disabled){
			window.open(base+'pms.html','pms','width=596,height=600,scrollbars=yes');
		}
	},
	pdf: function(){
		if(!tabs.disabled){
			downloadFile('download/docs/','pdf');
		}
	},
	downloadhr: function(){
		if(!tabs.disabled){
			downloadFile('download/phigh/','galeria');
		}
	},
	downloadlr: function(){
		if(!tabs.disabled){
			downloadFile('download/plow/','galeria');
		}
	}	
};

var downloadFile = function(url,type,flag){
	var file;
	if(type=='presentacion') file = presentacion.imagen.split('.');
	else if(type=='box') file = presentacion_image.split('.');
	else if(type=='galeria') file = foto.imagen.split('.');
	else if(type=='pdf') file = filepdf.split('.');
	url = base+url+file[1]+'/'+(flag?'flag_':'')+file[0];
	window.location = url;
};

var activeCSS =function(title) {
   var i, a, main;
	$$('link').each(function(a){
		if(a.get('rel').indexOf('style') != -1   && a.get('title')!='') {
			a.disabled = true;
			if(a.get('title') == title) a.disabled = false;
		}
   })
}

var init = function(){
	cont3.removeClass('loading');
	tabs.show(0);
}

window.addEvent('domready',function(){
	cont3 = $('cont3');

	//tabs
	var handlesBox= new Element('div',{'id':'handles'}).inject(cont3);
	var contentsBox = new Element('div',{'id':'contents'}).injectAfter(handlesBox);
	cont3.getElements('h2').each(function(el,i){
		tabs.elements.push(el.getNext().addClass('block').inject(contentsBox));
		tabs.handles.push(el.inject(handlesBox).addEvent('click',tabs.show.pass([i],tabs)));
	});
	
	if(type==0) {

		// slide presentaciones |---------------------->
		var marca = $('marca');
		var presentBox = $('presentaciones').empty();
		new Element('h4').setHTML('Click on colour to view and hold image').inject(presentBox);
		var colorTitle = new Element('h3').inject(presentBox);
		var presentsMask = new Element('div',{'id':'presentsMask'}).inject(presentBox);
		var presentsBox = new Element('div',{'id':'presentsBox'}).inject(presentsMask);
		var presentsHandleBox = new Element('div',{'id':'presentsHandleBox'}).inject(presentBox);
		var presentsBoxContent = new Element('div',{'id':'presentsBoxContent'}).inject(presentsBox);
		for(var i=0;i<presentaciones.length;i++){
			var present = presentaciones[i];
			var imgTemp = new Element('img',{'alt':present.colorNombre ,'src':'/img/productos/presentaciones/'+present.imagen}).inject(presentsBoxContent);
			var colorHandle = present.colorImagen ? '<img src="/img/productos/colores/'+present.colorImagen+'" />' : '<strong><span style="background:rgb('+present.colorCodigo+')">&nbsp;</span></strong>';
			new Element('div',{'id':'p'+present.id}).setHTML(colorHandle).inject(presentsHandleBox);
		}
		if(presentaciones.length>1){
			presentsSlider = new noobSlide({
				box: presentsBox,
				mode: 'vertical',
				items: presentaciones,
				handles: presentsHandleBox.getChildren(),
				handle_event: 'mouseenter',
				size: 400,
				startItem: 1,
				onWalk: function(){
					this.handles.removeClass('active');
					this.handles[this.currentIndex].addClass('active');
					colorTitle.setHTML(this.items[this.currentIndex].colorNombre);
				}
			});
			presentsSlider.handles.addEvent('click',function(){presentIndex=this.currentIndex;presentacion=presentaciones[presentIndex];}.bind(presentsSlider));
			presentsHandleBox.addEvent('mouseleave',function(){presentsSlider.walk(presentIndex,true,true);});
			presentsSlider.walk(0,true,true);
		}else{
			colorTitle.innerHTML = presentacion.colorNombre;
		}
		// <----------------------| slide presentaciones

		if(flag){
			var flagFxOut = function(){
				if(!flagOpen && !flagFx.timer){
					flagOpen = true;
					flagHand.removeClass('hover').setProperty('title','');
					flagInfo.removeClass('hidden');
					if(marca) marca.removeClass('hidden');
					flagFx.start(180);
					presentsHandleBox.fade('in');
				}
			};

			var flagFxIn = function(){
				if(flagOpen && !flagFx.timer){
					flagOpen = false;
					if(marca) marca.addClass('hidden');
					flagFx.start(500);
					flagHand.addClass('hover').setProperty('title','click on the flag or leave mouse from the flag to return to the pallet');;
					flagInfo.addClass('hidden');
					presentsHandleBox.fade('out');
				}
			};

			var toggleFlagFx = function(){
				if(flagOpen){
					flagFxIn();
				}else{
					flagFxOut();
				}
			};

			imgFlag = new Element('img',{'src':'/img/productos/flags/'+flagImage, 'id':'imgFlag'}).setStyle('display','none').inject(presentsMask);

			flagFx = new Fx.Tween(presentsMask,'width', {
				onStart:function(){
					imgFlag.setStyle('display','block');
				},
				onComplete:function(){
					if(flagOpen){
						imgFlag.setStyle('display','none')
					}
				}
			});

			flagHand = new Element('div',{'id':'flagHand'}).addEvents({
				'mouseleave':flagFxOut,
				'click':toggleFlagFx
			}).inject(tabs.elements[0]);
			
			flagInfo = new Element('p',{'id':'flagInfo'}).setHTML('Click inside the red box to see the flag.').inject(tabs.elements[0]);

			flagHand.fireEvent('click');
		}
	}

	// slide para las fotos
	if(foto && fotos.length>1){
		var info = $('info');
		var gallerySlider = new noobSlide({
			box: $('fotos'),
			items: fotos,
			buttons: {'next':$('next'),'previous':$('prev') },
			size: 460,
			onWalk: function(){
				info.setHTML((this.currentIndex+1)+' / '+this.items.length);
				foto=fotos[this.currentIndex];
				this.fotosDivs[this.currentIndex].setStyle('overflow','auto');
			}
		});
		gallerySlider.fotosDivs = gallerySlider.box.getChildren();
		gallerySlider.fotosDivs.each(function(el,i){el.setStyle('left',(i*gallerySlider.size)+'px')});
	}

	//MAIL
	contenido = $E('.popup');
	close = $E('.pfoot');
	theForm = $('formMail').addEvent('submit',function(e){
		new Event(e).stop();
		var formStatus = validator.test();
		if(!formStatus){
			validator.showInvalid(true);
		}else{
			loading.show();
			contenido.addClass('hidden').setOpacity(1);
			new Request({
				url: base+ajaxUrl,
				data: 'id='+producto_id+'&imagen='+(presentacion.id? presentacion.id : '')+'&nombre='+$('name').value+'&email='+$('email').value+'&nombre2='+$('name2').value+'&email2='+$('email2').value+'&asunto='+$('asunto').value+'&comentarios='+$('comentarios').value+'&url='+window.location.href,
				onSuccess: function(response){
					if(response=='true') {
						loading.set('Thank you, your email has been sent.','success');
					}else {
						loading.set('Cannot receive e-mail.','error');
					}
					loading.hide.delay(2000,loading);
				}
			}).send();
		}
	});
	validator = new iValidator(theForm.getElements('input[type=text],textarea'));
	
	//opciones
	$$('.options li').each(function(el){el.addEvent('click',actions[el.className]);});

	//mostrar el elemento de la lista
	var listBox = $E('#itemslist ul');
	var activeItem = $E('#itemslist .active').getParent();
	var posScroll = activeItem.getPosition(listBox);
	listBox.scrollTo(0,posScroll.y);

});

window.addEvent('load',function(){init.delay(500);});