var timer = 0, over = false;

function openWindow(ev) {
	
	Event.stop(ev);
	
	new Ajax.Request("/ajax/getProductInfo", {
		parameters: {aid: $(Event.element(ev)).readAttribute('rel')},
		onSuccess: function(response) {
			if (response.responseJSON.status == 'ok') {
				
				$("foto-articulo").update('<a class="amplify" href="'+ response.responseJSON.fotoArticuloBig +'"><img src="'+ response.responseJSON.fotoArticulo +'" alt="'+ response.responseJSON.nombreArticulo +'"></a>');
				$("foto-natural").update('<img src="'+ response.responseJSON.fotoNatural +'" alt="'+ response.responseJSON.nombreArticulo +'">');
				$("nombreArticulo").update(response.responseJSON.nombreArticulo);
				$("artDesc").update(response.responseJSON.descripcionArticulo);
				
				envHTML = '';
				
				response.responseJSON.envases.each(function(e) {
					envHTML+='<img src="'+e.img+'" alt="'+e.des+'" />';
				});
				
				$("envases").update(envHTML);
				
				
				$('overlay', 'boxProducto').invoke('show');

				var leftt = (Math.floor(document.viewport.getWidth() / 2)) - 308 + 'px';
				var top = (Math.floor(document.viewport.getHeight() / 2)) - 259 + 'px';
				$('boxProducto').setStyle({
					left: leftt,
					top: top
				});

				$$('.amplify').first().observe('click', function(e) {
					$$('#imHolder').invoke('remove');
					
					$(this).insert('<img style="position:absolute; top: -97px; left:90px; width:16px !important; border: solid 0 transparent" class="loading" src="/img/loading.gif" width="16" height="11" />');
					$(this).setStyle({position:'relative'});
					Event.stop(e);
					
					imHold = new Element('div',{id:'imHolder'}).setStyle({position: 'fixed', textAlign:'center', top:'100px', width:'100%', zIndex:'10000'})
					im = new Element('img',{id: 'bigPic'}).setStyle({margin:'auto', backgroundColor: '#FFFFFF'/*, 'padding': '15px 10px'*/}).hide();
					im.title = "Click sobre la imagen para cerrar";
					off = $('boxProducto').cumulativeOffset()
					
					imHold.setStyle({top: off.top+40 +'px'})
					
					imHold.insert(im);
					
					im.onload = function(e) {
						$$('.loading').invoke('remove');
						$('bigPic').setStyle({'display':'block'});
					
						/*widthCurrent = $$('#foto-articulo a img').first().getWidth();
						heightCurrent = $$('#foto-articulo a img').first().getHeight();
						*/
						w = this.getWidth();
						h = this.getHeight();
												
						var xScale = (w  / 1)  * 100;
				        var yScale = (h / 1) * 100;
							
						this.setStyle({'width': '1px', 'height':'1px'});


						new Effect.Scale('bigPic', xScale, {scaleY: false, duration: 0.2, queue: 'front'});
						new Effect.Scale('bigPic', yScale, {scaleX: false, duration: 0.2, queue: 'front'});
						
						
					};
					
					im.onclick = function(e) {
						$(this).remove();
					};
					
					$$('body')[0].insert(imHold);
					im.src = this.href;
					
					//['.prod-desc', '.borde'].each(function(e) {$$(e).invoke('hide')});
					
				});

				fleXenv.fleXcrollMain('scrollable');
				$('scrollable').fleXcroll.setScrollPos(false,0);
			
			}
		},
		onFailure: function(response) {
			
		}
	});
	
}

function removeOverlays () {
	$('overlay', 'boxProducto').invoke('hide');
	$$('#imHolder').invoke('remove');
}

document.observe("dom:loaded", function() {
	$$('.span-7 ul li a').invoke('observe', 'click', openWindow);
	initUsos();
	$('prodLink').observe('mouseover', showMenu).observe('mouseout', function(){over = false;});
	$('menuProductos').observe('mouseover', function(){over = true;}).observe('mouseout', function(){over = false;});
	
	$$('#overlay').invoke('observe', 'click', removeOverlays);
})

function showMenu() {
	over = true;
	timer = setTimeout('hideMenu()', 5000);
	Effect.BlindDown('menuProductos', {duration: 0.3});
}

function hideMenu () {
	if (over) {
		console.info("timeout");
		timer = setTimeout('hideMenu()', 1000);
		return false;
	}
	Effect.BlindUp('menuProductos', {duration: 0.3});
}

function desplegar (el) {
	
	var rel = $(el).readAttribute('href').replace('#', '');
	

		$$('div.desplegarHolder[rel="'+rel+'"]').each(function(e) {
			if ($(e).visible()) {
				Effect.BlindUp(e, {duration: 0.5});
			} else {	
				Effect.BlindDown(e, {duration: 0.5});
			}
		});
		
	return rel;
	
}

function initUsos () {
	$$('a.desplegar').invoke('observe', 'click', function(ev) {
		Event.stop(ev);
	
		desplegar(this);
	});
	
	$$('.useBox a.prodLink').invoke('observe', 'click', openWindow);
	
}