/**
 * @author Bram Mulders
 */

 function view(id, type, ln){
	//startloading
	$('picture_main').hide();
	$('picture_main').setStyle({
		height: '100px',
		width:  '100px',
		marginTop: '-50px',  
		marginLeft: '-50px', 
		left: '50%', 
		top: '50%'
	});
	
	
	new Effect.Appear('picture', {
		duration: .6 , 
		to: 1,
	 	afterFinish: function(){
	 		$('picture_main').show();
			ajax_picture(id, type, ln);
	 	}
		});
	return true;
 }
 
  function load_big_img(filename){
 
 	var newImage 	= null;
	newImage 		= new Image();
	newImage.src 	= "works/" + filename +".jpg";
	
	if (newImage.complete) {
		$('big_pic').src 	= newImage.src;
	} else {
		newImage.onload = function() {
			$('big_pic').src 	= newImage.src;
		}.bind(this);
	}
 }
 
 function ajax_picture(id, type, ln){
 	$('big_pic').src ="images/blank.gif";
	$('big_pic').hide();
	$('picture_title').hide();
 	new Ajax.Request("ajax_picture.php", {
 		method: "post",
		parameters: {
			id: id,
			type: type,
			ln: ln
			},
		onSuccess: function(transport){
			xmlDoc=transport.responseXML;
			pic_height = xmlDoc.getElementsByTagName("height")[0].childNodes[0].nodeValue;
			pic_width = xmlDoc.getElementsByTagName("width")[0].childNodes[0].nodeValue;
			filename = xmlDoc.getElementsByTagName("filename")[0].childNodes[0].nodeValue;
			pic_title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
			
			
			next_pic_id = xmlDoc.getElementsByTagName("next_pic_id")[0].childNodes[0].nodeValue;
			prev_pic_id = xmlDoc.getElementsByTagName("prev_pic_id")[0].childNodes[0].nodeValue;
			
			if (pic_title != "empty") {
				$('picture_title').update(pic_title);
				add_height = 25;
			} else {
				$('picture_title').update();
				add_height = 0;
			}
			
			load_big_img(filename);
			height_view = document.viewport.getDimensions().height;
			width_view = document.viewport.getDimensions().width;
			
			set_top = '50%';
			set_left = '50%';
			
			if ((parseInt(pic_height) + add_height) < (height_view - (20))){
				new_height_pic = parseInt(pic_height);
				change_ver = false;
			} else {	
				new_height_pic = (height_view - (20 + add_height));	
				change_ver = true
			}

			if (pic_width < (width_view - 20)){
				new_width_pic = parseInt(pic_width);
				change_hor = false;
			} else {			
				new_width_pic = (width_view - 20);
				change_hor = true;
			}
			
			ratio_pic = parseInt(pic_height) / parseInt(pic_width);
			
			if (change_ver && change_hor) {
				new_width_pic_temp = new_height_pic / ratio_pic;
				if (new_width_pic_temp > (width_view - 20)){
					new_height_pic = new_width_pic * ratio_pic;
				} else {
					new_width_pic = new_width_pic_temp;
				}	 
			} else if (change_ver) {
				new_width_pic = new_height_pic / ratio_pic; 
			} else if (change_hor) {
				new_height_pic = new_width_pic * ratio_pic; 
			} 
			
			
			new_height_div = new_height_pic + add_height;
			
			margin_top = (new_height_div / 2);
			margin_left = (new_width_pic / 2);
			margin_top = '-' + margin_top + 'px';
			margin_left = '-' + margin_left + 'px';

			if (next_pic_id != "empty") {
				$('pic_next').update('<a href="#" onclick="ajax_picture(' + next_pic_id + ',\'' + type + '\',\'' + ln + '\'); return false;">volgende</a>');
				$('pic_next').show();
			} else {
				$('pic_next').update();
				$('pic_next').hide();
			}
			if (prev_pic_id != "empty") {
				$('pic_prev').update('<a href="#" onclick="ajax_picture(' + prev_pic_id + ',\'' + type + '\',\'' + ln + '\'); return false;">vorige</a>');
				$('pic_prev').show();
			} else {
				$('pic_prev').update();
				$('pic_prev').hide();
			}
			
			
			new Effect.Morph('picture_main',{
			  	style: {
					height: new_height_div + 'px',
					width:  new_width_pic + 'px',
					top: set_top,
					left: set_left,
					marginLeft: margin_left,
					marginTop: margin_top
				},
			  	duration:0.5,
				afterFinish: function(){
	 				$('big_pic').show();
					if (pic_title != "empty") {
						$('picture_title').show();
					}
	 			}
			});
	
			
			$('big_pic').setStyle({
				height: new_height_pic + 'px',
				width:  new_width_pic + 'px'
			});
			
			
		}
 	});
	
 }