var IMAGE_LIST_URL = 'services/image_list.php';
var PATH_TO_PICTURES = 'pictures/';
var BASE_IMAGE_WIDTH = 473;
var BASE_IMAGE_HEIGHT = 400;
var THUMB_MICROFICATION = 4;
var THUMB_IMAGE_WIDTH = BASE_IMAGE_WIDTH / THUMB_MICROFICATION;
var THUMB_IMAGE_HEIGHT = BASE_IMAGE_HEIGHT / THUMB_MICROFICATION;
var IMAGES_PER_ROW = 4;
var INACTIVE_OPACITY = 0.5;
var IMAGES_PER_PAGE = 16;

Event.observe(window, 'load', function()	{
	var myAjax = new Ajax.Request(
		IMAGE_LIST_URL, 
		{
			method: 'post', 
			parameters: '', 
			onComplete: process_image_list
		});
	
}, false);

function process_image_list(ajax)	{
	var image_list;
	
	try	{
		image_list = eval('(' + ajax.responseText + ')');
	}
	catch(e)	{
		alert('Fallo en el listado de imagenes.');
		return 0;	
	}
	
	$('image_canvas').image_list = image_list;
	$('image_canvas').current_start = 0;
	
	paint_images();
}

function paint_images()	{
	var image_list = $('image_canvas').image_list;
	var image_canvas = $('image_canvas');
	
	while(image_canvas.hasChildNodes())
		image_canvas.removeChild(image_canvas.firstChild);
		
	image_canvas.style.height = Math.ceil(Math.min(IMAGES_PER_PAGE, image_list.length) / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT + 'px';
	image_canvas.parentNode.style.height = Math.ceil(Math.min(IMAGES_PER_PAGE, image_list.length) / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT + 'px';
	
	for(var i = image_canvas.current_start; i < image_list.length && i < IMAGES_PER_PAGE + image_canvas.current_start; i++)	{
		var img = document.createElement('img');
		img.src = 'services/image.php?file=' + image_list[i];
		img.style.width = THUMB_IMAGE_WIDTH + 'px';
		img.style.height = THUMB_IMAGE_HEIGHT + 'px';
		img.image_index = i - image_canvas.current_start		
		img.style.position = 'absolute';
		img.style.cursor = 'pointer';
		img.style.left = img.image_index % IMAGES_PER_ROW * THUMB_IMAGE_WIDTH + 'px';
		img.style.top = parseInt(img.image_index / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT + 'px';
		img.style.zIndex = 1;
		// img.opacity = INACTIVE_OPACITY;
		img.style.opacity = INACTIVE_OPACITY;
		img.style.filter = 'alpha(opacity=' + INACTIVE_OPACITY * 100 + ')';
		
		image_canvas.appendChild(img);
	}
	
	var markup = image_canvas.innerHTML;
	image_canvas.innerHTML = '';
	image_canvas.innerHTML = markup;
	
	for(var i = 0; i < image_canvas.childNodes.length; i++)	{	
		var img = image_canvas.childNodes[i];
		img.image_index = i;		
		img.slide_fx = new Fx.Styles(img, {duration: 500, transition: Fx.Transitions.expoOut});
		img.opacity_fx = new Fx.Styles(img, {duration: 500, transition: Fx.Transitions.quadOut});
		
		Event.observe(img, 'mouseover', function()	{
			var element = window.event ? window.event.srcElement : this;;
			element.opacity_fx.clearTimer();
			element.opacity_fx.custom({
				'opacity' : [parseFloat(element.style.opacity), 1]
			});
			
			element.slide_fx.clearTimer();
			element.slide_fx.custom({
				'width' : [element.offsetWidth, THUMB_IMAGE_WIDTH * 1.1],
				'height' : [element.offsetHeight, THUMB_IMAGE_HEIGHT * 1.1],
				'left' : [element.offsetLeft, element.offsetLeft - THUMB_IMAGE_WIDTH * .05],
				'top' : [element.offsetTop, element.offsetTop - THUMB_IMAGE_WIDTH * .05]
			});
		}, false);
		
		Event.observe(img, 'mouseout', function()	{
			var element = window.event ? window.event.srcElement : this;;
			element.opacity_fx.clearTimer();
			element.opacity_fx.custom({
				'opacity' : [parseFloat(element.style.opacity), INACTIVE_OPACITY]
			});
			
			element.slide_fx.clearTimer();
			element.slide_fx.custom({
				'width' : [element.offsetWidth, THUMB_IMAGE_WIDTH],
				'height' : [element.offsetHeight, THUMB_IMAGE_HEIGHT],
				'left' : [element.offsetLeft, element.image_index % IMAGES_PER_ROW * THUMB_IMAGE_WIDTH],
				'top' : [element.offsetTop, parseInt(element.image_index / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT]
			});
		}, false);
				
		Event.observe(img, 'click', handle_image_click, false);
	}
}

function update_page(direction)	{
	if(direction == 'next')
		$('image_canvas').current_start	+= IMAGES_PER_PAGE;	
	else
		$('image_canvas').current_start	-= IMAGES_PER_PAGE;	
	
	if($('image_canvas').current_start > $('image_canvas').image_list.length)	{
		alert('No hay más imágenes!');
		$('image_canvas').current_start	-= IMAGES_PER_PAGE;	
		return 0;			
	}

	if($('image_canvas').current_start < 0)	{
		alert('ˇya puede comenzar a ver las fotos!');
		$('image_canvas').current_start	+= IMAGES_PER_PAGE;	
		return 0;			
	}
		
	paint_images();
}

function handle_image_click()	{
	var element = window.event ? window.event.srcElement : this;
	
	if(element.offsetWidth != BASE_IMAGE_WIDTH)	{
	
		element.style.zIndex = 2;
		
		element.slide_fx.clearTimer();
		element.slide_fx.custom({
			'width' : [element.offsetWidth, BASE_IMAGE_WIDTH],
			'height' : [element.offsetHeight, BASE_IMAGE_HEIGHT],
			'left' : [element.offsetLeft, 0],
			'top' : [element.offsetTop, Math.max(0, Math.min($('image_canvas').offsetHeight - BASE_IMAGE_HEIGHT, element.offsetTop - (BASE_IMAGE_HEIGHT / 2) + (BASE_IMAGE_HEIGHT / (THUMB_MICROFICATION * 2))))]
		});
		
		for(var i = 0; i < element.parentNode.childNodes.length; i++)	{
			var sibling = element.parentNode.childNodes[i];
			
			if(sibling != element)	{
				sibling.style.zIndex = 1;
				if(
					sibling.offsetWidth != THUMB_IMAGE_WIDTH || 
					sibling.offsetHeight != THUMB_IMAGE_HEIGHT
				)	{
					sibling.slide_fx.clearTimer();
					sibling.slide_fx.custom({
						'width' : [sibling.offsetWidth, THUMB_IMAGE_WIDTH],
						'height' : [sibling.offsetHeight, THUMB_IMAGE_HEIGHT],
						'left' : [sibling.offsetLeft, sibling.image_index % IMAGES_PER_ROW * THUMB_IMAGE_WIDTH],
						'top' : [sibling.offsetTop, parseInt(sibling.image_index / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT]
					});
				}
			}
		}
	}
	else	{
		element.style.zIndex = 1;
		
		element.slide_fx.clearTimer();
		element.slide_fx.custom({
			'width' : [element.offsetWidth, THUMB_IMAGE_WIDTH],
			'height' : [element.offsetHeight, THUMB_IMAGE_HEIGHT],
			'left' : [element.offsetLeft, element.image_index % IMAGES_PER_ROW * THUMB_IMAGE_WIDTH],
			'top' : [element.offsetTop, parseInt(element.image_index / IMAGES_PER_ROW) * THUMB_IMAGE_HEIGHT]					
		});
		
	}
}