$(document).ready(function(){
  $('div.BossThumb').hide();
  $('<div class="gallery" />').appendTo('.BossAlbum').append('<div id="album-container"/>').append('<div class="overlay"/>');  
  $('div.gallery').prepend('<div id="gallery-caption"><p/></div>');
  $('div.BossAlbum img').each(function () {
    $(this).appendTo('#album-container').attr('style', '').attr('path', $(this).attr('src'));
  });

	overlay.container = $("div.gallery div.overlay");
	overlay.caption = $('#gallery-caption > p');

	//Click event for overlay
	$('div.gallery div.overlay').bind("click", function(e) {
		if(e.target.className == "next") overlay.next();
		if(e.target.className == "prev") overlay.prev();
    if(e.target.className == "cur" && typeof tb_show !== 'undefined')
      tb_show(e.target.getAttribute('alt'), e.target.getAttribute('src').replace('-th', ''));
	});

  overlay.prepare($('#album-container img').get(0));
	lastContainer = $("#album-container img:first")[0];
});

var overlay = {
	container: null,
	speed: 500,
	isRunning: false,
	prepare: function(cur) {
		overlay.container.empty().show();
		var cw = 650, ch = 545;    
		
		//Determine next/prev pictures
		var next = ($(cur).next().length) ? $(cur).next()[0]: false;
		var prev = ($(cur).prev().length) ? $(cur).prev()[0]: false;
		
		//Clone the picture (full-sized)
		var img = $("<img class='cur' alt='" + cur.alt + "' src='"+cur.src+"' />").attr("path", cur.getAttribute('path')).appendTo("div.gallery div.overlay");
    overlay.caption.html(cur.alt)
		//We cannot display it at full width and height
		$(img).css("width", cw - 220);
   
    overlay.height = $(img).height();
    overlay.width = cw - 220;
        
    //Position the picture in the middle
		var pos_x = (cw / 2) - ( $(img)[0].offsetWidth / 2 );

		$(img).css({left: pos_x, top :0});    
    
		//Create the left hand image
		var img_left = $("<img class='prev' alt='" + (prev? prev.alt : '')  + "' path='"+(prev ? prev.getAttribute('path') : cur.getAttribute('path'))+"' src='"+(prev ? prev.src : '')+"' style='width: 50px;' />").appendTo(overlay.container);
		img_left.css({ left: (pos_x / 2) - ( 50 / 2 )});
		if(!prev) img_left.css("visibility", "hidden"); else img_left[0].src = prev.getAttribute('src'); //Hide this one if it's only a filler, otherwise lazy load the pic

		//Create the right hand image
		var img_right = $("<img class='next' alt='" +(next? next.alt : '') + "' path='"+(next ? next.getAttribute('path') : cur.getAttribute('path'))+"' src='"+(next ? next.src : '')+"' style='width: 50px;' />").appendTo(overlay.container);
		$(img_right).css({ left: (pos_x+$(img)[0].offsetWidth) + (pos_x / 2) - ( 50 / 2 )});
		if(!next) img_right.css("visibility", "hidden"); else img_right[0].src = next.getAttribute('src'); //Hide this one if it's only a filler, otherwise lazy load the pic
	
		//This is the transition from thumb to coverflow view
		var pos = $(cur)[0].offsetTop;
		pos = pos + $(cur).parent()[0].scrollTop;

        /* Adding Next and Previous labels to thumbnails */
        $("<span class=\"prev\">Previous</span>").appendTo("div.gallery div.overlay").hide();
        $("<span class=\"next\">Next</span>").appendTo("div.gallery div.overlay").hide();

        if ( prev ) $("span.prev", $("div.gallery div.overlay")[0]).show();
        if ( next ) $("span.next", $("div.gallery div.overlay")[0]).show();

		overlay.container.animate({ opacity: 1 },500);      
        
	},
	next: function() {
		
		if(overlay.isRunning) return;
		overlay.isRunning = true;
		
		var cur = $("img.cur", overlay.container);
		var next = $("img.next", overlay.container);
		var prev = $("img.prev", overlay.container);
		
		var curLeft = parseInt(cur.css("left"));
		var curNextPosition = [parseInt(next.css("left")),parseInt(next.css("top"))];
		
		//Make the current one small and move it to the 'prev' position
    $(cur).removeClass("cur").addClass("prev");

    

		cur.animate({
			width: 50,
			left: parseInt(prev.css("left")),
			top: parseInt(prev.css("top"))
		}, overlay.speed, function() { window.setTimeout(function() { overlay.isRunning = false; },50);  });
		
		//Make the previous one vanish (if there is a previous)..
		if(prev.length)
			prev.animate({ width: 0, padding: 0, top: parseInt(prev.css("top")) + (prev[0].offsetHeight / 2) }, overlay.speed, function() {$(this).remove();});
		
		//..and the next one big
		next.animate({ width: overlay.width, top: parseInt(cur.css("top")), left: curLeft }, overlay.speed, function() { $(this).removeClass("next").addClass("cur");  });
		
		//and finally, add a new 'next' picture if one exists
		var path = (next[0].src.split("/"));
		var strippedsrc = path[path.length-1];
		var upcoming = $("div.gallery #album-container img[@src*="+strippedsrc+"]").next().not(".bigthumb");
		
		var img_right = $("<img class='next' alt='"+(upcoming.length ? upcoming[0].alt : cur[0].src)+"' src='"+(upcoming.length ? upcoming[0].src : cur[0].src)+"' style='width: 50px; visibility: hidden;' />").appendTo("div.gallery div.overlay");
		var img_right_height = img_right[0].offsetHeight;
		
		img_right.css({
			left: curNextPosition[0]+(upcoming.length ? 50 : 0),
			top: curNextPosition[1]+(upcoming.length ? img_right_height/2 : 0),
			width: upcoming.length ? 1 : 50,
			visibility: upcoming.length ? "visible": "hidden"
		});
		
		if(upcoming.length)
			img_right.animate({ width: 50, top: curNextPosition[1], left: curNextPosition[0] }, overlay.speed, function() {
        this.src = upcoming[0].getAttribute("path");
      });

        
        if ( prev ) $("span.prev", $("div.gallery div.overlay")[0]).show();
        if (!upcoming.length) $("span.next", $("div.gallery div.overlay")[0]).hide();


      overlay.caption.fadeOut(function () {
       $(this).html(next[0].alt);
       $(this).fadeIn(); 
     });
     
	},
	prev: function() {
		
		if(overlay.isRunning) return;
		overlay.isRunning = true;
		
		var cur = $("img.cur", overlay.container);
		var next = $("img.next", overlay.container);
		var prev = $("img.prev", overlay.container);
		
		var curLeft = parseInt(cur.css("left"));
		var curPrevPosition = [parseInt(prev.css("left")),parseInt(prev.css("top"))];
		
		//Make the current one small and move it to the 'next' position
    $(cur).removeClass("cur").addClass("next");
		cur.animate({
			width: 50,
			left: parseInt(next.css("left")),
			top: parseInt(next.css("top"))
		}, overlay.speed, function() { window.setTimeout(function() { overlay.isRunning = false; },50);  });
	
		//Make the next one vanish (if there is a previous)..
		if(next.length) {
			next.animate({
				width: 0, padding: 0,
				top: parseInt(next.css("top")) + (next[0].offsetHeight / 2),
				left: parseInt(next.css("left")) + next[0].offsetWidth
			}, overlay.speed, function() { $(this).remove(); });
		}
			
		//..and the previous one big
		prev.animate({ width: overlay.width, top: parseInt(cur.css("top")), left: curLeft }, overlay.speed, function() { $(this).removeClass("prev").addClass("cur");  });
	
		//and finally, add a new 'prev' picture if one exists
		var path = (prev[0].src.split("/"));
		var strippedsrc = path[path.length-1];
		var upcoming = $("div.gallery #album-container img[@src*="+strippedsrc+"]").prev().not(".bigthumb");
		
		var img_left = $("<img class='prev'  alt='"+(upcoming.length ? upcoming[0].alt : cur[0].src)+"' src='"+(upcoming.length ? upcoming[0].src : cur[0].src)+"' style='width: 50px; visibility: hidden;' />").appendTo("div.gallery div.overlay");
		var img_left_height = img_left[0].offsetHeight;
		
		img_left.css({
			left: curPrevPosition[0],
			top: curPrevPosition[1]+ (upcoming.length ? img_left_height/2 : 0),
			width: upcoming.length ? 1 : 50,
			visibility: upcoming.length ? "visible": "hidden"
		});
		
		if(upcoming.length)
			img_left.animate({ width: 50, top: curPrevPosition[1] }, overlay.speed, function() { this.src = upcoming[0].getAttribute("path"); });	
	  
        if (!upcoming.length) $("span.prev", $("div.gallery div.overlay")[0]).hide();
        else $("span.prev", $("div.gallery div.overlay")[0]).show();
        if (!next.length) $("span.next", $("div.gallery div.overlay")[0]).hide();
        else $("span.next", $("div.gallery div.overlay")[0]).show();

   overlay.caption.fadeOut(function () {
       $(this).html(prev[0].alt);
       $(this).fadeIn(); 
     });

	}	
}