/****************************************
Uses Galleria jQuery plugin to dynamically
create photos content
****************************************/
var photosPlugin = function(parent, data, server){
	server = server || "";
        server = 'http://media.liquidcommon.com';
	
	var $parent = $("#" + parent);
	if(data.length == 0){ //if no photos are there
		var html = '<div id="PhotoContent">' +
			  '<div id="PhotoLeftContent">' +
				'<h1 id="PhotosTitle"></h1>' +
			  '<div id="SelectedPhoto">' +
			  '</div>' +
			  '</div>' +
			  '<div id="PhotoRightContent">' +
			  '</div>' +
		  '</div>';
		  		
		$parent.html(html);
		$("#PhotosTitle").html("Photos");
		
		$("#SelectedPhoto").html('<div class="emptydata"><table class="emptyphotos" style="width:100%"><tr><td>There are currently no photos available.</td></tr></table></div>');
		return;
	}
	//insert the base HTML
	var html = '<div id="PhotoContent">' +
				  '<div id="PhotoTopContent">' +
					'<h1 id="PhotosTitle"></h1>' +
					  '<div id="MainPhoto">' +
						'<div id="main_image">' +
						'</div>' +
					  '</div>' +
				  '</div>' +
				'</div>';
	
	if($parent){
		$parent.html(html);
		$("#PhotosTitle").html("Photos");
		
		var listHtml = '<div class="ThumbList"><ul class="unstyled">';
		var count = 0;
		//iterate the data and create unordered lost
		$.each(data, function(index, value){
		    count = count + 1;
			if(index == 0)
				listHtml += '<li class="active"><img src="' + server + '/Photos/' + value.LgName + '" title="' + value.Caption + '"></li>'
			else
				listHtml += '<li><img src="' + server + '/Photos/' + value.LgName + '" title="' + value.Caption + '"></li>'
		});
		listHtml += '</ul></div>';
		
		$("#MainPhoto").append(listHtml);
		if(count > 1)
			$("#MainPhoto").append('<p class="imgnav"><a onclick="$.galleria.prev(); return false;" href="#">« previous</a> | <a onclick="$.galleria.next(); return false;" href="#">next »</a></p>');
		else
			$("#MainPhoto").append('<p class="imgnav"></p>');
		
		$('.unstyled').addClass('gallery'); // adds new class name to maintain degradability
		
		$('ul.gallery').galleria({
			history   : false, // activates the history object for bookmarking, back-button etc.
			clickNext : false, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});	

	}
	
	
	
}