var IMAGE_LIST_URL = 'services/image_list.php';
var PATH_TO_PICTURES = 'pictures/';
var BASE_IMAGE_WIDTH = 600;
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.85;
var IMAGES_PER_PAGE = 12;
var CHANGE_BACK = "";
var ORIGINAL_Y = "";
var img2 = document.createElement('img');
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('Image list load failed.');
		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];
		//img2.src = 'services/image.php?file=before/' + 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];
		//var img2 = 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()	{
			//alert(img);
			
			
			var element = window.event ? window.event.srcElement : this;
			
			
			
			if(CHANGE_BACK!=""){
				element.src = CHANGE_BACK;
				CHANGE_BACK = "";
				
			}
			//document.getElementById('baplaceholder').style.display = "inline";
			//document.getElementById('beforeafter').style.display = "none";
			//alert(element.offsetTop);
			
			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 more images!');
		$('image_canvas').current_start	-= IMAGES_PER_PAGE;	
		return 0;			
	}

	if($('image_canvas').current_start < 0)	{
		alert('You\'re already at the beginning!');
		$('image_canvas').current_start	+= IMAGES_PER_PAGE;	
		return 0;			
	}
		
	paint_images();
}

function handle_image_click()	{
	var show_img = "";
	var org_img = "";
	var img_name = "";
	var img_wo_ext = "";
	var img_ext = "";
	//document.getElementById('beforeafter').style.display = "inline";
	//document.getElementById('baplaceholder').style.display = "none";
	var element = window.event ? window.event.srcElement : this;
	CHANGE_BACK = element.src;
	org_img = element.src;
	img_name = org_img.substr(org_img.indexOf("=")+1,org_img.length - org_img.indexOf("="));
	img_wo_ext = img_name.substr(0,img_name.indexOf("."));
	img_ext = img_name.substr(img_name.indexOf(".")+1,3);		
	//alert(element.image_index);
	//alert(img_name);
	//element.src = "http://pari.example.com/house/services/image.php?file=before/" + img_name;
	document.getElementById('mydiv').style.display = "inline";
	document.getElementById('before_i').src = "pictures/before/" + img_name;
	document.getElementById('after_i').src = "pictures/after/"  + img_name;
//document.getElementById('lightbox').innerHTML = '<img src="images/house1.jpg">';
	//alert(CHANGE_BACK);
	//alert(element.src);
	//element.src = "http://pari.example.com/house/services/image.php?file=before/IMG_1568.jpg";
	ORIGINAL_Y = element.offsetTop;
	//alert(element.offsetHeight);
	/*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]
					});
				}
			}
		}
		//alert(sibling.offsetTop);
	}
	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]					
		});
		
	}*/
}