// JavaScript Document

/**
* Function : dump()
* Arguments: The data - array,hash(associative array),object
*    The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
*/
function dump(arr,level)
{
	var dumped_text = "";
	if(!level) level = 0;
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object')
	{ //Array/Hashes/Objects
		for(var item in arr)
		{
			var value = arr[item];
	
			if(typeof(value) == 'object')
			{ //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,level+1);
			}
			else
			{
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} 
	else
	{ //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}


/**
 * Function : spotlight_pictures()
 * Not really useful for the iPhone since there is no mouse over but this
 * function fades the other picutres when the user mouse overs one of them
 * @param	obj	can be either an image or an object containing the image
 */
function spotlight_pictures(obj)
{
	var p=/pic([0-9]+)/;
	var img=document.getElementsByTagName('img');
	for (var i=0; i<img.length; i++) 
	{
		if (p.test(img[i].id)) 
		{
			if (obj.tagName.toString().toLowerCase()=='img')
			{
				if (obj.id != img[i].id)
					adjust_element(img[i], 'fade', 10, 10, 0.5);
			}
			else
				adjust_element(img[i], 'show', 10, 10, 0.5);
		}
	}  
}

/**
 * Function : close_tools()
 * Close the tools panel when the user clicks on the close button. All what is done then
 * is putting back the interface. The timing functions are only used for cool animations
 */
function close_tools()
{
	//new Fx.Height('n_tools', {duration: 300}).toggle();
	new Fx.Opacity('n_slideshow', {duration: 350}).toggle();
	
	new Fx.Height('n_slideshow-menu', {duration: 300}).toggle();
	new Fx.Opacity('n_slideshow-menu', {duration: 350}).toggle();
	
	show_hide_infos('hide');
	
	setTimeout("new Fx.Height('panel', {duration: 450}).toggle(); new Fx.Height('header', {duration: 300}).custom(0, 50);", 350);
	setTimeout("new Fx.Height('panel-showpanel', {duration: 450}).toggle();", 350);


	if (($('n_login').style.height == "0pt" && $('n_search').style.height == "0pt") || 
		($('n_login').style.height == "0px" && $('n_search').style.height == "0px"))
		setTimeout("new Fx.Opacity('footer', {duration: 350}).custom(0, 1);", 650);
		
	setTimeout("new Fx.Opacity('pictures', {duration: 250}).custom(0, 1);", 500);
	setTimeout("new Fx.Height('n_slideshow', {duration: 250}).set(0)", 500);
	
	setTimeout("document.body.style.backgroundColor = '#FFF';", 500);
	setTimeout("$('content').style.backgroundColor 	= '#FFF';", 500);
	
	//setTimeout("new Fx.Style('slideshow', 'z-index').set(-1); alert($('slideshow').style.zIndex);", 950);
	/*setTimeout("new Fx.Style('slideshow-back', 'visibility').set('hidden');", 750);*/
}

/**
 * Function : close_tools()
 * If an image just loaded is to big for the iPhone its height has to be upated.
 * <b>Important note</b>: Safari is very nice because it resamples the images directly so that
 * this kind of function makes sense. With Firefox the image would appear sharpen
 * @param	img	The image to check the height
 */
function fit2iPhone(img, fade)
{
	/*var src 	= img.src;
	var o 		= fade != null ? 0  : 1;
	var style 	= ' style="opacity:'+o+'; filter=alpha(opacity='+(o*100)+');" ';
	var height 	= ''	
	if (img.height > 350 && document.body.getAttribute("orient") == 'profile')
	{
		height = ' height="350" ';
		$('slideshow').innerHTML = '<img id="slideshow-img" src="'+src+'" alt="'+src+'" '+height+style+' />';
	}
	else if (img.height > 270 && document.body.getAttribute("orient") == 'landscape')
	{
		height = ' height="270" ';
		$('slideshow').innerHTML = '<img id="slideshow-img" src="'+src+'" alt="'+src+'" '+height+style+' />';
	}
	if (o==0)		
		new Fx.Opacity('slideshow-img', {duration: 250}).custom(0,1);*/
	new Fx.Opacity('slideshow-img', {duration: 350}).custom(0,1);

	
}
function switchThumbnails(transport)
{
	
	var response = transport.responseText || "error";
	if (response == "error")
		alert('Woups... Something went wrong...');
	
	else
	{	
		new Fx.Opacity('slideshow-img', {duration: 250}).custom(1,0);
		setTimeout("$('slideshow').innerHTML = '"+(response.replace(/[\n\r]/g, ''))+"';", 250);		
		setTimeout("updateinfos();", 400);
	}
}
/**
 * Function : magnify()
 * Called when the user clicks on a thumbnail. The purpose here is to show the picture
 * bigger and in the slideshow
 * Also this functions tells the server what picture is currently beeing seen.
 * @param	img	The image to magnify
 */
function magnify(img)
{
		  
		  
	if ($('header').style.height.length == 3 || islocked()== true)
		return;
	
	var src  	= img.src.replace(/(\d+x\d+\.jpg)$/gi,"500x400.jpg");
	var width	= '100%'; //document.body.getAttribute("orient") == 'profile' ? 310 : 390;
	var id 		= 'slideshow-img';
	var orient 	= document.body.getAttribute('orient');
	
	$('n_slideshow').style.height = 'auto'; // 'height).set('auto'(orient == 'profile' ? 365 : 365-80));
	new Fx.Opacity('pictures', {duration: 350}).toggle();
	new Fx.Opacity('footer', {duration: 350}).toggle();
	new Fx.Height('panel', {duration: 350}).toggle();
	new Fx.Height('panel-showpanel', {duration: 350}).toggle();
	new Fx.Height('header', {duration: 500}).toggle();
	
	new Ajax.Request('/services/iphone/photos',
			{ parameters: 'src='+img.src.replace(/(\d+x\d+\.jpg)/, '') });
	
	$('slideshow').innerHTML = 	'<img id="'+id+'" src="'+src+'" alt="'+src+'" width="'+width+'"'+
							  	' onLoad="fit2iPhone(this);" style="opacity:0;" onclick="handleMenu();" />'; //onLoad="fit2iPhone(this);
	
//	setTimeout("new Fx.Height('n_tools', {duration: 300}).custom(0, 26);",500);
//	setTimeout("new Fx.Height('n_tools', {duration: 300}).custom(0, 26);",500);
	
	setTimeout("new Fx.Height('n_slideshow-menu', {duration: 300}).custom(0, 70);", 500);
	setTimeout("new Fx.Opacity('n_slideshow-menu', {duration: 350}).custom(0,1);", 500);
	
	setTimeout("new Fx.Opacity('n_slideshow', {duration: 450}).custom(0, 1);",900);
	setTimeout("document.body.style.backgroundColor = '#444A49';", 1000);
	setTimeout("$('content').style.backgroundColor 	= '#444A49';", 1000);
	
	
	
}

function handleMenu()
{
	if ($('n_slideshow-menu').style.opacity == null || $('n_slideshow-menu').style.opacity == 0)
	{
		new Fx.Height('n_slideshow-menu', {duration: 300}).custom(0, 70);
		new Fx.Opacity('n_slideshow-menu', {duration: 350}).custom(0,1);
	}
	else
	{
		new Fx.Height('n_slideshow-menu', {duration: 300}).toggle()
		new Fx.Opacity('n_slideshow-menu', {duration: 350}).custom(1,0);
	}
}

/**
 * Function : show_hide_infos()
 * Show the pieces of information related to one image>
 * For example the author, the tags, when it was taken...
 * @param	force	Optional. Forces to appear or disappear 
 *					instead of switching
 */
function show_hide_infos(force)
{
	if (force != null && force == 'hide')
	{
		if ($('infos').src.search(/clicked\.png/i) != -1)
		{
			$('infos').src = $('infos').src.replace(/info_clicked\.png/i, 'info.png');
			new Fx.Opacity('n_slideshow-infos', {duration: 200}).custom(1, 0);
		}
	}
	else
	{
		if ($('infos').src.search(/info\.png/i) != -1)
		{
			$('infos').src = $('infos').src.replace(/info\.png/i, 'info_clicked.png');
			new Ajax.Updater('slideshow-infos', '/services/iphone/photos',
				{
					parameters:'mode=tags',
					onComplete: function () 
						{
							if ($('n_slideshow') != null && $('n_slideshow').style.opacity == 1) 
								new Fx.Opacity('n_slideshow-infos', {duration: 200}).custom(0, 1);
						} 
				});
			
		}
		else
		{
			$('infos').src = $('infos').src.replace(/info_clicked\.png/i, 'info.png');
			new Fx.Opacity('n_slideshow-infos', {duration: 200}).custom(1, 0);
		}
	}	
		
}

/**
 * Function : updateinfos()
 * If the user has activated the pictures infos, when he clicks on
 * a previous or next button the picture changes and so should the infos.
 * @see	switchThumbnails
 */
function updateinfos()
{
	/*if ($('infos').src.search(/clicked\.png/i) != -1)
	{
		setTimeout("new Fx.Opacity('n_slideshow-infos', {duration: 200}).custom(1, 0);", 0);
		setTimeout("new Fx.Opacity('n_slideshow-infos', {duration: 200}).custom(0, 1);", 250);
	}*/
	setTimeout("new Ajax.Updater('slideshow-infos', '/services/iphone/photos', { parameters: 'mode=tags'});", 200);
	
}

/**
 * Function : updatePicturesLayout()
 * When the user hides the panel, this function is called to fill up the space.
 * Also when the panel is restored, the function is called again, this to get rid of
 * some of the pics
 * @see show_panel
 * @see hide_panel
 */
function updatePicturesLayout()
{
	var orient = document.body.getAttribute('orient');
	setTimeout(function() {$('footer').style.top = orient == 'profile' ? '400px' : '245px';}, 0);
	setTimeout(function () {window.scrollTo(0, 1); }, 100);
}