var combo_select = new Class ({
	container:'container_combo',
	initialize: function (percent){
		this.percent = percent;
		var imagenes = $(this.container).getElements('img').dispose();
		imagenes.each(this.construirCombo,this);
	},
	
	construirCombo:function(img, index){
		$('id_combo').value = 0;
		var cont = new Element('div', { 'id': 'container' });
		var combo = new Element('div', { 'id': 'combo'});
		var ampliar = new Element('div', { 'id': 'ampliar_'+(index+1), 'class': 'ampliar'});
		var title = new Element('div', { 'id': 'titulo'});
		var foto = new Element('div', { 'id': 'divFoto'+(index+1), 'class': 'foto_combo'});
		var oscuro = new Element('div', {'id': 'oscuro_'+(index+1), 'class': 'oscuro'});
		var title_oscuro = new Element('div', { 'id': 'title_oscuro_'+(index+1), 'class': 'oscuroTitle' });
		var titulo_combo = img.get('alt');
		
		cont.inject($(this.container));
		combo.inject(cont);
		title.inject(combo);
		ampliar.inject(combo,'bottom');
		foto.inject(combo,'bottom');
		oscuro.inject(cont,'bottom');
		title_oscuro.inject(cont,'bottom');
		img.inject(foto);
		
		$(img).addEvents({
			'mouseenter':this.zoom.bindWithEvent(this,(index+1)),
			'mouseleave':this.dezoom.bindWithEvent(this,(index+1)),
			'click': this.selectCombo.bindWithEvent(this,(index+1))
		});
		
		var imagen = new Element('img', {'src':"imagenes/btn_agrandado.jpg",
								 'id':'btn_Ampliar'+(index+1),
								 'alt':"Ampliar Combo",
								 'width': 84,
								 'height':20
								}).inject($(ampliar));
		
		$(ampliar).addEvents({
			'mouseover':function (e){e.stop(); $('btn_Ampliar'+(index+1)).src="imagenes/over_agrandado.jpg";},
			'mouseout':function (e){e.stop();  $('btn_Ampliar'+(index+1)).src="imagenes/btn_agrandado.jpg";},
			'click': this.ampliarImagen.bindWithEvent(this,(index+1))
		});
		
		$(img).store('zoom',true);
		$(title).set('html', '<img src="imagenes/combo'+(index+1)+'.jpg" align="right" width="97px" height="20px">');
		$(title_oscuro).set('html', "Combo <br> Seleccionado");
		this.tamagnoInicial(img,(index+1));
	},
	
	zoom:function(e,index) {
		e.stop();
		var morph_image = $('descrip_combo2').get('morph', {link: 'cancel'});
		
		morph_image.start({'opacity': [1,0]}).chain(function (){$('descrip_combo2').src = 'imagenes/descrip_combo'+(index)+'.jpg';
																morph_image.start({'opacity': [0,1]});
																}) ;
		
		
		
		var imagen = $(e.target);
		if (imagen.mouseDown){return;}
		imagen.set('morph', {link: 'cancel', transition: 'bounce:out'});
		var morph = imagen.get('morph', {link: 'cancel'});
		if (imagen.retrieve('zoom')){
			imagen.store('zoom',false);	
			
			morph.start({'padding-top': [imagen.retrieve('top'), imagen.retrieve('top_final')], 'padding-left': [imagen.retrieve('left'), imagen.retrieve('left_final')], 'height': [imagen.retrieve('alto') , imagen.retrieve('alto_final')], 'width': [imagen.retrieve('ancho'), imagen.retrieve('ancho_final')]});
		}
	},

	ampliarImagen: function (e,index){
		var imagen = $(e.target);
		var imagen_grande = "<img src='imagenes/cmb"+index+".jpg'/>";
		var detalle_combo = new light_box({container: 'light_box',lightBoxOpacity:0.8, tema:'combo' });
		detalle_combo.abrirLightBox(imagen_grande);
	},
	
	dezoom:function(e,index) {
		e.stop();
		var imagen = $(e.target);
		var morph = imagen.get('morph');
		if (!imagen.retrieve('zoom')  && $(this.container).retrieve('click')!= index){
				imagen.store('zoom',true);
				morph.start({'padding-top': [imagen.retrieve('top_final'), imagen.retrieve('top')], 'padding-left': [imagen.retrieve('left_final'), imagen.retrieve('left')], 'height': [imagen.retrieve('alto_final') , imagen.retrieve('alto')], 'width': [imagen.retrieve('ancho_final'), imagen.retrieve('ancho')]});
		}
	},
	
	selectCombo:function(e,index) {
		var imagen = $(e.target);
		var morph = $('oscuro_'+index).get('morph');
		var element_oscuro = $('oscuro_'+index);
		var index_ant = $(this.container).retrieve('click');
		var img_ant = $(this.container).retrieve('object');
		var oscuro_ant =  $('oscuro_'+index_ant);
		
		element_oscuro.store('top',element_oscuro.getStyle('top'));
		element_oscuro.store('left',element_oscuro.getStyle('left'));
		
		if (!index_ant){
			$('id_combo').value = index;
			$('title_oscuro_'+index).style.display = "block";
			
			morph.start({
						'top': [element_oscuro.getStyle('top'), imagen.retrieve('top_final')+20], 
						'left': [element_oscuro.getStyle('left') ,0],
						'opacity': [0, 0.7], 
						'height': [element_oscuro.getStyle('height') , imagen.retrieve('alto_final')], 
						'width': [element_oscuro.getStyle('width'), imagen.retrieve('ancho_final')]}).chain (
							function (){$('title_oscuro_'+index).tween('opacity', [0,1]);});
			
			$(this.container).store('click',index);
			$(this.container).store('object',e);
		}else if (index_ant != index){
			
				var morph_ant = $('oscuro_'+index_ant).get('morph');
				var morph_img = $(img_ant.target).get('morph');
				$(this.container).store('click',index);
				$(this.container).store('object',e);
				$('id_combo').value = index;
				
				morph_img.start({
								'padding-top': [imagen.retrieve('top_final'), imagen.retrieve('top')], 
								'padding-left': [imagen.retrieve('left_final'), imagen.retrieve('left')], 
								'height': [imagen.retrieve('alto_final') , imagen.retrieve('alto')], 
								'width': [imagen.retrieve('ancho_final'), imagen.retrieve('ancho')]});
				
				$(img_ant.target).store('zoom',true);
				$('title_oscuro_'+index_ant).tween('opacity', [1,0]);
				
				morph_ant.start({
								'top': [oscuro_ant.getStyle('top'), element_oscuro.retrieve('top')], 
								'left': [oscuro_ant.getStyle('left') ,element_oscuro.retrieve('left')],
								'opacity': [0.7, 0], 
								'height': [oscuro_ant.getStyle('height'), 0], 
								'width': [oscuro_ant.getStyle('width'), 0]}).chain(
									function (){
										$('title_oscuro_'+index_ant).style.display = "none";
										$('title_oscuro_'+index).style.display = "block";
										morph.start({
											'top': [element_oscuro.getStyle('top'), imagen.retrieve('top_final')+20], 
											'left': [element_oscuro.getStyle('left') ,0],
											'opacity': [element_oscuro.getStyle('opacity'), 0.7], 
											'height': [element_oscuro.getStyle('height') , imagen.retrieve('alto_final')], 
											'width': [element_oscuro.getStyle('width'), imagen.retrieve('ancho_final')]})
										.chain (function (){$('title_oscuro_'+index).tween('opacity', [0,1]);});
						});
		}
	},
	
	tamagnoInicial: function (img,index)
	{	
		var imagen = $(img);
		var alto = parseInt(imagen.getStyle('height').replace("px", ""));
		var ancho = parseInt(imagen.getStyle('width').replace("px", ""));
		var top = parseInt(imagen.getStyle('padding-top').replace("px", ""));
		var left = parseInt(imagen.getStyle('padding-left').replace("px", ""));
		var alto_final = alto + (Math.round((alto * this.percent)/100));
		var ancho_final = ancho + (Math.round((ancho * this.percent)/100));
		
		
		imagen.store('alto',alto);
		imagen.store('ancho',ancho);
		imagen.store('top',top);
		imagen.store('left',left);
		imagen.store('alto_final',alto_final);
		imagen.store('ancho_final',ancho_final);
		imagen.store('top_final',0);
		imagen.store('left_final',0);
		
		
		
	}
})