// JavaScript Document

(function($) {
$.fn.fbAlbum = function(pid){
var s = {
    type: 'albums',                
    album_id: pid,// [string]    required, for type=='photoset'  
    user_id: 'FDP.Sachsen',         // [string]    for type=='search' search by user id
    thumb_size: 'a',           		 // [string]    allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
    size: '',                 		 // [string]    allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
    per_page: 150,              		 // [integer]   allowed values: max of 500
    page: 2,   		           		 // [integer]   see paging notes
    api_url: null,             		 // [string]    optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
    params: '',                		 // [string]    optional, custom arguments, see http://www.flickr.com/services/api/flickr.photos.search.html
    api_callback: '?',         		 // [string]    optional, custom callback in flickr JSON-P response
    callback: ''            		  // [function]  optional, callback function applied to entire <ul>

    // PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide hooks for a custom paging routine
    // within the <ul> created by the plug-in, there are two hidden <input> tags, 
    // input:eq(0): current page, input:eq(1): total number of pages, input:eq(2): images per page, input:eq(3): total number of images
    
    // SEARCH NOTES: when setting type to 'search' at least one search parameter  must also be passed text, user_id, group_id, or tags
    
    // SIZE NOTES: photos must allow viewing original size for size 'o' to function, if not, default size is shown
  };
  return this.each(function(){
    // create unordered list to contain flickr images
	var list = $('<div class="fb_photoset"></div>').appendTo(this);
	list.append('<div class="imgSwitch"><img src="'+DBName+'/fb_loader1.gif" class="ajaxload" /></div>');
	
	
	//LOADER
	var url = $.fbAlbum.format(s);
	$.getJSON(url+'&callback=?', function(r){
		if(r.error) {list.append('<p class="error">Es ist ein Fehler aufgetreten. Bitte &uuml;berpr&uuml;fen Sie die Album-ID!</p>');}
		//HEADLINE
				var txt= '<h1>'+r.name +'<span class="count"> ('+ r.count +' Bilder)</span></h1>'
				
				
				//LADEN DES COVERPHOTOS
				var url_cover = "https://graph.facebook.com/" + r.cover_photo;
				$.getJSON(url_cover+'&callback=?', function(o){
					var cover_url = o.source;
					list.find('.imgSwitch').append('<img class="cover" src="'+cover_url+'" />');
					var c = list.find('.imgSwitch img.cover');
					c.load( function() {
						var h1 = c.innerHeight();
						var w1 = c.innerWidth();
						if(h1<w1) {
							c.css({
								'width':'701px',
								'margin': 0,
								'position':'relative',
								'z-index': 2
							})
							list.find('.imgSwitch').animate({'height': c.innerHeight()},200);	
						}
						if(h1>w1) {
							
							c.css('height','460px')
							list.find('.imgSwitch').animate({'height':'460px'},200);
							var w2 = parseInt(c.innerWidth()/2);
							c.css({
								'position': 'absolute',
								'top':0,
								'z-index': 2,
								'left': '50%',
								'margin-left': '-'+w2+'px'	
							})
						}
						c.fadeIn(300);	
					})
					
					
					
				})
				
				
				//IMAGES
				$.getJSON(url+'/photos&limit='+s.per_page+'&callback=?', function(r){
				txt+= '<ul>';
				 
				for (var i=0; i<r.data.length; i++){
					var thumb_url = r.data[i].picture;
					var full_url = r.data[i].source;
					txt+='<li><a href="'+full_url+'" class="lightBox"><img src="'+thumb_url+'" /></a></li>'
					
				}
				txt+= '</ul><div class="clear"></div>'
			list.append(txt);
			list.find('li img').each(function(){
				$(this).hide();
				$(this).load(function(){
					imgAusrichten($(this));	
				})
			})
		})
	})
  })
};
// static function to format the flickr API url according to the plug-in settings 
$.fbAlbum = {
    format: function(s){
		var url = 'https://graph.facebook.com/';
		switch (s.type){
            case 'albums':
				url += s.album_id;
                break;
            default:
                url += s.user_id;
        };
        return url;
    }
};
})(jQuery);

function imgAusrichten(x){
			var h = x.innerHeight();
			var w = x.innerWidth();
			if(h>w) {x.css('width','84px')}
			if(h<w) {x.css('height','84px')}
			var h = x.innerHeight();
			var w = x.innerWidth();
			
			x.css({
				'margin-top': '-'+h/2+'px',
				'margin-left': '-'+w/2+'px',
			})
			x.fadeIn(500);
		x.parent().unbind('click').click(function(){
			var is = $(this).parent().parent().parent().find('.imgSwitch');
			is.find('img:not(.ajaxload)').fadeOut(200,function(){$(this).remove();})
			is.append('<img src="'+$(this).attr("href")+'" />');
			is.find('img:not(.ajaxload)').hide()
			is.find('img:not(.ajaxload)').load( function() {
				var h1 = $(this).innerHeight();
				var w1 = $(this).innerWidth();
				if(h1<w1) {
					$(this).css({
						'width':'701px',
						'margin': 0,
						'position':'relative',
						'z-index': 2
					})
					is.animate({'height': $(this).innerHeight()},200);	
				}
				if(h1>w1) {
					
					$(this).css('height','460px')
					is.animate({'height':'460px'},200);
					var w2 = parseInt($(this).innerWidth()/2);
					$(this).css({
						'position': 'absolute',
						'top':0,
						'z-index': 2,
						'left': '50%',
						'margin-left': '-'+w2+'px'	
					})
				
				
				}
				
				
				is.find('img').fadeIn();
			});
			return false;	
		})
	
};