var scrolling = null;

function scroll_up(){
    var d = document.getElementById('thumbs_li');
    d.scrollTop = d.scrollTop - 10;
    scrolling = window.setTimeout(function() {
        scroll_up();
    }, 100);
}

function scroll_down(){
    var d = document.getElementById('thumbs_li');
    d.scrollTop = d.scrollTop + 10;
    scrolling = window.setTimeout(function() {
        scroll_down();
    }, 100);
}

function stop_scroll(){
	window.clearTimeout(scrolling);
}

function pupulate_gallery(){
	var flickr_user = $('#flickr_user').val();
	var flickr_album = $('#flickr_album').val();
	
	//if a flick album is not defined, asume we'll use the complete public photostream for this user
	if(flickr_album == ''){
		var json_url = 'http://api.flickr.com/services/feeds/photos_public.gne?id='+flickr_user+'&format=json&jsoncallback=?';
	}else{
		var api_key = "88743a58b58b98ecd8880a8afb7068b8";
		//var --> api key
		var json_url = 'http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key='+api_key+'&photoset_id='+flickr_album+'&format=json&jsoncallback=?';
	}
	
	//call the flickr api
	$.getJSON(json_url,function(data){
		$.each(data.photoset.photo, function(i,photo){
			var this_photo_title = photo.title;
			var this_thumb = 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_m.jpg';
			this_thumb = this_thumb.split('_m');
			this_thumb = this_thumb[0]+'_s.jpg';
			$("<img/>").attr("src", this_thumb).appendTo("#thumbs_li_inside").attr("title",this_photo_title);
			if(i==0){
				var uri = this_thumb;
				uri = uri.split('_s');
				uri = uri[0]+'_b.jpg';
				
				var img = new Image();
		        $(img).load(function(){
		            $(this).hide();
		            $('#slides').removeClass('loading').append(this);
		            $(this).attr("title",this_photo_title).fadeIn();
					$('#photo_title').html("<h3>"+this_photo_title+"</h3>");
					
					var alto = $(this).height();
					var ancho = $(this).width();
					var alto_cont = $('#slides').height();
					var ancho_cont = $('#slides').width();
					
					if(ancho < ancho_cont && alto < alto_cont){
						var margin_left = (ancho_cont - ancho)/2;
						var margin_top = (alto_cont - alto)/2
						$(this).css({
							'width': ancho,
							'height': alto,
							'margin-left': margin_left,
							'margin-top': margin_top
						});		
					}else{
						if(ancho > alto){
							var proporcion = ancho/alto;
							ancho = ancho_cont;
							alto = ancho / proporcion;
							var margin = (alto_cont - alto)/2;
							$(this).css({
								'margin-top':margin,
								'width':ancho,
								'height':alto
							});	
						}else if(alto > ancho || ancho == alto){
							var proporcion = alto/ancho;
							alto = alto_cont;
							ancho = alto / proporcion;
							var margin = (ancho_cont - ancho)/2;
							$(this).css('margin-left',margin).css('width',ancho).css('height',alto);		
						}	
					}
					
		        }).error(function (){
		            // notify the user that the image could not be loaded
		        }).attr('src', uri);
			}
			if(i==6){
				$('#g_scroll_up').show();
				$('#g_scroll_down').show();
			}
		});
    });
}
$('#document').ready(function(){
	$('#select_gallery').change(function(){
		$('#gall').submit();								 
		});
		$('#g_scroll_up').hide();
		$('#g_scroll_down').hide();					  
							  
							  
		//scroll
	$('#g_scroll_down').mouseover(function(){
		scroll_down();
	});
	$('#g_scroll_up').mouseover(function(){
		scroll_up();
	});
	
	$('#g_scroll_down').mouseout(function(){
		stop_scroll();
	});
	$('#g_scroll_up').mouseout(function(){
		stop_scroll();
	});					  

	
	//POPULATE THE THUMB LIST
	pupulate_gallery();
	
	//click on a thumb
	$('#thumbs_li_inside img').live('click',function(){
		$('#slides').addClass('loading');
		$("#slides").empty();
		var uri = $(this).attr('src');
		uri = uri.split('_s');
		uri = uri[0]+'_b.jpg';
		
		var this_photo_title = $(this).attr("title");
		var img = new Image();
        $(img).load(function () {
            $(this).hide();
            $('#slides').removeClass('loading').append(this);
            $(this).attr("title",this_photo_title).fadeIn();
			$('#photo_title').html("<h3>"+this_photo_title+"</h3>");
			
			var alto = $(this).height();
			var ancho = $(this).width();
			var alto_cont = $('#slides').height();
			var ancho_cont = $('#slides').width();
			
			if(ancho < ancho_cont && alto < alto_cont){
				var margin_left = (ancho_cont - ancho)/2;
				var margin_top = (alto_cont - alto)/2
				$(this).css({
					'width': ancho,
					'height': alto,
					'margin-left': margin_left,
					'margin-top': margin_top
				});		
			}else{
				if(ancho > alto){
					var proporcion = ancho/alto;
					ancho = ancho_cont;
					alto = ancho / proporcion;
					var margin = (alto_cont - alto)/2;
					$(this).css('margin-top',margin).css('width',ancho).css('height',alto);	
				}else if(alto > ancho || ancho == alto){
					var proporcion = alto/ancho;
					alto = alto_cont;
					ancho = alto / proporcion;
					var margin = (ancho_cont - ancho)/2;
					$(this).css('margin-left',margin).css('width',ancho).css('height',alto);		
				}	
			}
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', uri);
	});
});