window.addEvent('domready', function(){

	var myActiveMenu = new activeMenu({ menuEl: $$('#menu .menu_a') });

	//********** ajaxLoader **************//
	if(typeof(myAjaxLoader)=='undefined') myAjaxLoader = new ajaxLoader(); 


	//productos
	$$('.producto_container').each(function(el,index){
			el.addEvent('click',function(event){
				event.stop();
				productDetails(el.href);
			}.bind(this));
	}.bind(this))
	

});


window.addEvent('load', function(){

	var carrouselTimerID = null;
	var myCarrousel = new carrousel({
		container: 'carrousel_container'
	});

});


var activeMenu = new Class({
	Implements: [Options],
	options: {
		menuEl: null,
		activeClass: 'active'
	},
	initialize: function(options) {
		this.setOptions(options);
		this.options.menuEl.each(function(el){
			el.removeClass('active')
			if(document.location.href == el.href) el.addClass('active')
		});
	}
});





/**************************************************** SHORTCUT FUNCTIONS **************************************************/
var myShow = new Object();
function productDetails(productURL){
	
 	var myProductDetail	= new lightbox({
		url: productURL+'&mode=2',
		onClose: function(){
			myShow.pause();	
			myShow.destroy();	
		}.bind(this)
	});
	
}

/**************************************************** CONTACTO **************************************************/
function contactoFn(){

	var contactoAjax = new Request({
		url:'contacto_post.php',
		encoding:'iso-8859-1',
		method: 'post',
		data:$('contacto'),
		onRequest: function(){
			$('update_container').set('html','<img src="imagenes/ajax-loader.gif" style="float:left; padding:0px 4px;"><span style="display:block; padding:4px 8px; color:red;">enviando mensaje...</span>');
		},
		onSuccess: function(responseText){
			$('update_container').set('html',responseText);
		}
	}).send();
};

/**************************************************** REGISTRESE **************************************************/
function registreseFn(){

	var registreseAjax = new Request({
		url:'registrese_post.php',
		encoding:'iso-8859-1',
		method: 'post',
		data:$('form_registrese'),
		onRequest: function(){
			$('update_container').set('html','<img src="imagenes/ajax-loader.gif" style="float:left; padding:0px 4px;"><span style="display:block; padding:4px 8px; color:red;">Enviando datos...</span>');
		},
		onSuccess: function(responseText){
			$('update_container').set('html',responseText);
		}
	}).send();
};

/**************************************************** CARROUSEL HORIZ **************************************************/
var carrousel = new Class({
	Implements: [Options, Events],
	options: {
		container: null,
		horizMode: true,
		showTitles: false,
	},
	initialize: function(options){
		this.setOptions(options);

		this.panelArr = new Array;
		this.titleArr = new Array;
		this.paneli = null;
		this.panelCount = null;
		

		this.panelCount = $$("#"+this.options.container+" .panel").length;
		
		if(this.panelCount>1){
		
				if(this.options.horizMode){
					this.wrapSize = $(this.options.container).getElement('.wrap').getSize();
					$(this.options.container).getElement('.slide').setStyle('width',this.wrapSize.x*this.panelCount);		
				}
		
				
				$$("#"+this.options.container+" .panel").each(function(panelEl, panelIndex){
					this.panelArr[panelIndex] = panelEl;
					this.addBtn(panelIndex);
				}.bind(this));	
				
				
		
				$$("#"+this.options.container+" .desc .slide .titulos").each(function(titleEl, titleIndex){
					this.titleArr[titleIndex] = titleEl;
				}.bind(this));	
				
				
				//armo el scroll para los titulos
				if(this.options.showTitles==true){
					this.options.myScrollTiles = new Fx.Scroll($(document.body).getElement("#"+this.options.container+" .desc"),{
						'link': 'chain',
						duration: 700,
						fps: 25,
						wheelStops: false,
						transition: Fx.Transitions.Quad.easeInOut
					}); 
				}
		
				
				$(this.options.container).addEvent('mouseenter', function(){
					this.pause();
				}.bind(this));
		
		
				$(this.options.container).addEvent('mouseleave', function(){
					this.play();
				}.bind(this));
				
		
				//armo el scroll para los paneles
				this.options.myScroll = new Fx.Scroll($(document.body).getElement("#"+this.options.container+" .wrap"),{
					'link': 'chain',
					duration: 700,
					fps: 25,
					wheelStops: false,
					transition: Fx.Transitions.Quad.easeInOut
				}); 
						
				$(this.options.container).getElement('#back').addEvent('click',function(){
					this.back();
				}.bind(this));
				
				$(this.options.container).getElement('#next').addEvent('click',function(){
					this.next();
				}.bind(this));
						
						
						
				$(this.options.container).getElement('#btn_0').addClass('active');
		
		
				carrouselTimerID = this.next.periodical(3500,this);
		}

	},
	next: function(){
	
		this.paneli++;
	
		if(this.paneli<this.panelCount){
			this.Goto(this.paneli);
		}else{
			this.Goto(0);
			this.paneli = 0;
		}

		
	},
	back: function(){
		this.paneli--;
		
		if(this.paneli>=0){
			this.Goto(this.paneli);
		}else{
			this.Goto((this.panelCount-1));
			this.paneli = this.panelCount-1;
		}
	},
	Goto: function(panelIndex){
		//desactivo todos los btn
		$(this.options.container).getElements('.btn').removeClass('active');
		//marco como activo el btn
		$(this.options.container).getElement('#btn_'+panelIndex).addClass('active');
		
		
		this.options.myScroll.toElement(this.panelArr[panelIndex]);
		if(this.options.showTitles) this.options.myScrollTiles.toElement(this.titleArr[panelIndex]);	

	},
	pause: function(){
		clearInterval(carrouselTimerID);
	},
	play: function(){
		carrouselTimerID = this.next.periodical(3500,this);

	},
	addBtn: function(panelIndex){
		var nav = $(this.options.container).getElement(".nav");
		
		var navBtn  = new Element('li', {
			'id': 'btn_'+panelIndex,
			'class': 'btn',
			events: {
					click: function(){
						this.Goto(panelIndex);
					}.bind(this)
				}
		}).inject(nav); 
	},
	destroy: function(){
		this.pause();
		Object.each(this, function(value, key){
			Object.erase(this, key);
		}.bind(this));
	}
	  
});



/**************************************************** LIGHTBOX  **************************************************/
var lightbox = new Class({
	Implements: [Options,Events,Chain],
	options: {
		url: null,
		method: 'get',
		'lbId': '',
		'lbClass': 'lightboxCommon',
		closeable: true,
		draggable: false,
		zindex: 10000,
		bg: true,
		bgTransition: Fx.Transitions.Quad.easeInOut,
		bgDuration: 300,
		bgMorph: {
			'background-color':['#FFF','#000'],
			'opacity': [0.1, 0.85],
		},
		lbTransition: Fx.Transitions.Quad.easeInOut,
		lbDuration: 700,
		lbMorph: {
			'visibility': 'visible',
			'opacity': [0.1, 1],
		},
		lbMorphClose: {
			'opacity': [1, 0.1]
		}
	},
	initialize: function(options) {
		this.setOptions(options);
	
		this.chain(
			 function(){ 
			 

				this.winSize = window.getSize();
				
				this.bodyScroll = document.body.getScroll();

					
				// creo el container
				this.container = new Element('div', {
					styles:{
						position: 'fixed',
						top: 0,
						left: 0,
						width:this.winSize.x,
						height:this.winSize.y,
						'z-index':this.options.zindex,
						overflow:'hidden'
					}
				}).inject(document.body,'bottom');	
				
				
				//cargo el contenido
				var myRequest = new Request.HTML({
					url: this.options.url,
					method: this.options.method,
					evalScripts: false,
					onRequest: function(){
						myAjaxLoader.show();
					},
					onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
						this.contentRequest = responseHTML;
						this.javascriptRequest = responseJavaScript;
						myAjaxLoader.hide();
					}.bind(this),
					onComplete: function(){
						this.load();
			 			this.callChain();
					}.bind(this)
				}).send();

			 },
			 function(){ 
				//FONDO
				// creo el elemento bg
				if(this.options.bg){
						this.bg = new Element('div', {
							styles:{
								position: 'absolute',
								top: 0,
								left: 0,
								width:this.winSize.x,
								height:this.winSize.y,
								'z-index':this.options.zindex+1,
								overflow:'hidden'
							},
							events: {
								click: function(){
								  if(this.options.closeable) this.close();
								}.bind(this)
							}
						}).inject(this.container,'bottom');	
						
						//this.bg.setStyle("opacity", 0);
						
						var bgFx = new Fx.Morph(this.bg, {
							duration: this.options.bgDuration,
							transition: this.options.bgTransition,
							onComplete: function()
							{
								this.callChain();
	
							}.bind(this)
						}).start(this.options.bgMorph);
				}else{
					this.callChain();
				}
					
			 },
			 function(){ 
			 
				//creo el lightbox
				this.lb = new Element('div', {
					'id': this.options.lbId,
					'class': this.options.lbClass,
					styles: {
						position: 'absolute',
						visibility: 'hidden',
						'z-index': this.options.zindex+2,
					},
					html: this.contentRequest 
				}).inject(this.container,'bottom');
				
				
		
				this.lb.position({
						relativeTo: this.container,
						allowNegative: true,
						offset: {x:0, y:-this.bodyScroll.y}
				});
		
				this.lbFx = new Fx.Morph(this.lb, {
					duration: this.options.lbDuration,
					transition: this.options.lbTransition,
					onStart: function(){
						eval(this.javascriptRequest);
					}.bind(this)
				}).start(this.options.lbMorph);	
				
				
				if(this.options.closeable){
					this.closeBtn = new Element('div', {
						'class': 'lbCloseBtn',
						styles: {
							'z-index': this.options.zindex+3,
						},
						events:{
							click: function(){
								this.close();
							}.bind(this)
						}
					}).inject(this.lb,'bottom');
			
					
					document.addEvent( 'keydown', function( evt ){
						   if( evt.code == 27 ){
								this.close();
						   }
					}.bind(this));
				}
				//drag
				if(this.options.draggable==true){
					this.drag();
				}
				
				//resize
				this.resize();
				
				
				
			 
			 }
		 ).callChain();	
	},
	load: function(){
		this.fireEvent('load');
	},
	close: function(){		
		this.lbFx = new Fx.Morph(this.lb, {
			duration: this.options.lbDuration,
			transition: this.options.lbTransition,
			onComplete: function(){
				this.container.destroy();
				this.fireEvent('close');
			}.bind(this)
		}).start(this.options.lbMorphClose);
		this.fireEvent('close');
	},
	drag: function(){
		this.dragHandle = new Element('div', {
			'class': 'dragHandle',
			styles: {
				'z-index': this.options.zindex+3,
			},
		}).inject(this.lb,'bottom');
		
		this.lbDrag = new Drag.Move(this.lb, {
			handle: this.dragHandle
		});	
		
		this.fireEvent('drag');
	},
	resize: function(){
		window.addEvent('resize', function( evt ){
			if(this.container) {
				
						
						//modifico  el tamaño del contenedor
						this.winSize = window.getSize();
							
						this.container.setStyles({
							width:this.winSize.x,
							height:this.winSize.y
						})
	
						//modifico  el tamaño del fondo
						if(this.bg){
							this.bg.setStyles({
								width:this.winSize.x,
								height:this.winSize.y
							})
						}
	
	
						this.lbPosition = this.lb.position({
							relativeTo: this.container,
							returnPos: true,
							allowNegative: true,
	  						offset: {x:0, y:-this.bodyScroll.y}
						});
				
						this.lbFx = new Fx.Morph(this.lb, {
							duration: this.options.lbDuration,
							transition: this.options.lbTransition
						}).start({
							top: this.lbPosition.top,
							left: this.lbPosition.left
						});	
			}
		}.bind(this));
				
		this.fireEvent('winResize');
	}
});



/*************************************************** ajax Loader**************************************************/
var ajaxLoader = new Class({
	Implements: [Options, Events],
	options: {
		idLoader: 'ajaxLoader',
		icon: 'imagenes/ajaxloader.gif',
		text: 'Cargando...'
	},
	initialize: function(options){
		this.setOptions(options);

		//creo contenedor
		this.ajaxLoaderContainer = new Element('div', {
			'id': this.options.idLoader,
			'html':'<img src="'+this.options.icon+'"><p>'+this.options.text+'</p>',
			styles:{
				position:'fixed',
				opacity:0
			}
		}).inject(document.body);

	},
	show: function(){
		//cierro otros AjaxLoader
		if($(this.options.idLoader)){
				
			this.ajaxLoaderContainer.fade(1); 
			
			//centro
			this.ajaxLoaderContainer.position();
			this.ajaxLoaderContainer.pin();
		}
	},
	hide: function(){
		if(typeof(this.ajaxLoaderContainer)!='undefined'){
			this.ajaxLoaderContainer.fade(0); 
		}
	}
});