function delegate(obj, method, args)
{
	return function () { method.apply(obj, args ? args.concat(arguments) : arguments); }
}

// ---------------------------------------------------------------------------------------------------------------------

// NOTE: Only one photoHost/thumbHost is supported, passing multiple on different instances will not work.

function Photo(photoData, thumbHost, photoHost)
{
	// fix this as it comes as a string 0/1 from PHP:
	photoData.isSeparator = parseInt(photoData.isSeparator);
	
	this.photoData = photoData;
	this.thumbHost = thumbHost;
	this.photoHost = photoHost;
	this.id = Photo.id++;
	Photo.all.push(this);
	
	var tEl = this.thumbEl = document.createElement('div');
	
	if (photoData.isSeparator) {
		tEl.className = 'thumbSeparator';	
	} else {
		tEl.className = 'thumb';
		tEl.onclick = delegate(this, this.pick);
	}
	
	$(tEl).css('opacity', 0.4);
	$(thumbHost).append(tEl).css('opacity', 0);
}

Photo.id = 1;

Photo.all = [];

Photo.prototype = {
	selected: false, 
	
	// tied to onmouseover
	rollOver: function () {
		
	},
	
	// tied to onmouseout
	rollOut: function () {
		
	},
	
	// tied to onclick fo the element, can be called manually
	pick: function() {
		var that = this;
		
		function onFade() {
			$(that.photoHost).html(
				'<div class="photoClient">' +
					'<div style="width: ' + (that.photoData.normalWidth - 2) + 'px; height: ' + (that.photoData.normalHeight - 2) + 'px"></div>' + 
					'<img onload="Photo.prototype.onPhotoLoad(this)" src="' + (isOffline ? '_media_properties_' : '/_media/properties/') + that.photoData.src+'">' + 
				'</div>'
			);
			
			$('.photoClient div').css('opacity', 0);
			$('.photoClient img').css('opacity', 0);
			
			setTimeout(function () {
				$('.photoClient div').animate({'opacity': 1}, 125);
			}, 600);
			
			$(that.photoHost).animate({opacity:1}, 125);	
		}
		
		$(this.thumbEl).animate({opacity: '1'}, 200);		
		$(this.photoHost).animate({opacity:0}, 125, onFade);
		
		this.selected = true;
		
		for (var i in Photo.all) {
			if (Photo.all.hasOwnProperty(i)) {
				if (this !== Photo.all[i]) {
					Photo.all[i].unpick();
				}
			}
		}
	},
	
	// called auto by pick for the rest of the photos
	unpick: function() {
		if (!this.photoData.isSeparator) {
			this.selected = false;
			$(this.thumbEl).animate({opacity: '0.4'}, 200);
		}
	},
	
	// UNTESTED
	onPhotoLoad: function(sender) {
		preloadPhotos(); // generated by the view inline
		
		var thHost = $(Photo.all[0].thumbHost);
		
		if (thHost.css('opacity') < 1) thHost.animate({opacity:1}, 250); 
		$(sender).animate({opacity:1}, 250);
	}
}


function Overlay(overlayData, overlayHost)
{
	this.data = overlayData;
	this.hostEl = overlayHost;
	
	var doc = $(document);
	var win = $(window);
	var that = this;
	
	if (Overlay.instance !== null) {
		Overlay.instance.destruct();
	}
	
	Overlay.instance = this;

	$(this.hostEl).append(
		$('<div id="overlayFade"></div>').css('opacity', 0)
	);
	
	$('#overlayFade').height(doc.height()).animate({'opacity': 0.75}, 300, part2);
	
	
	function part2()
	{
		var fade = $('#overlayFade');
		var startLeftMargin = Math.floor(win.width()/2) - 2/2;
		var startTopMargin = Math.floor(win.height()/2) - 500/2;
		var endLeftMargin = Math.floor(win.width()/2) - 740/2;
		
		$(that.hostEl).append('<div id="overlayPlate" style="margin-left:' + startLeftMargin + 'px; margin-top:' + startTopMargin + 'px"></div>');
		
		var plate = $('#overlayPlate');
		
		var animate = { 
			'width': '704px', 
			'marginLeft': endLeftMargin + 'px',
			'paddingLeft': '18px',
			'paddingRight': '18px'
		};
		
		if (!$.browser.msie) {
			plate.css('opacity', 0);
			animate.opacity = 1;
		} else {
			plate.css('background-color', '#070706');
			animate.backgroundColor = '#cccccc';
		}
		
		$('#overlayPlate').animate(animate, 400, part3);
	}
	
	function part3()
	{
		function photoFrame(prefix, index)
		{
			var html = '';			
			html += '<div style="float:left; width:704px; height:444px; background:url(' + (isOffline ? '_media_' : '/_media/') + 'loader.gif) no-repeat center center; margin-right:20px;">';
			html += '<img src="' + (isOffline ? '_media_publications_' : '/_media/publications/') + prefix + '_' + index + '.jpg" id="overlayImg' + index + '">';
			html += '<script>$("#overlayImg' + index + '").css("opacity", 0).load(function () { $(this).animate({"opacity": 1}, 400);});<\/script>';
			html += '</div>';
			
			return html;
		}
		
		var html = '';
		
		html += '<div id="overlayClient">';
		html += '<div class="controlsLeft"><a href="">&lt; Back</a> &nbsp;|&nbsp; <a href="">Next &gt;</a></div>';
		html += '<div class="controlsRight"><a href="" target="_blank">Get PDF (full size view)</a> &nbsp;|<a href="">&nbsp; Close</a></div>';
		html += '<div class="picHost"><div class="picClient"></div></div>';
		html += '</div>';
		html += '<div id="overlayClientReveal"></div>';
		
		$('#overlayPlate').append($(html));
			
		var controls = $('#overlayClient a');
		$(that.backLinkEl = controls.get(0)).click(function () { that.prevSlide(); return false; }).css();
		$(that.nextLinkEl = controls.get(1)).click(function () { that.nextSlide(); return false; });
		controls.get(2).href = (isOffline ? '_media_publications_' : '/_media/publications/') + that.data.prefix + '_1.pdf';
		$(controls.get(3)).click(function () { that.destruct(); return false; });
		
		that.syncLinkState();
		
		$('#overlayClientReveal').css('opacity', 1).animate({opacity: 0}, 150, part4);
		
		var html = '';		
		
		for (var i = 1; i <= that.data.count; i++) {
			html += photoFrame(that.data.prefix, i);
		}
		
		$('#overlayClient .picClient').html(html);
	}
	
	function part4()
	{
		$('#overlayClientReveal').hide();
	}
}

Overlay.instance = null;
Overlay.linkOffColor = '#999';
Overlay.linkOnColor = '#292929';

Overlay.prototype = {
	data: null,
	hostEl: null,
	slide:0,
	backLinkEl:null,
	nextLinkEl:null,
	
	destruct: function ()
	{
		$('#overlayPlate').hide();
		$('#overlayFade').animate({opacity: 0}, 300, part1);
		
		var that = this;
		
		function part1()
		{
			$(that.hostEl).html('');
			Overlay.instance = null;
		}
	},
		
	nextSlide: function()
	{
		if (this.slide < this.data.count - 1) this.moveSlide(1);
	},
		
	prevSlide: function()
	{
		if (this.slide > 0) this.moveSlide(-1);
	},
	
	moveSlide: function(delta)
	{
		this.slide += delta;
		
		$('#overlayClient .picClient').animate({'left': - (724 * this.slide) }, 600);
		
		this.syncLinkState();
	},
	
	syncLinkState: function()
	{
		$(this.backLinkEl).css('color', this.slide > 0 ? Overlay.linkOnColor : Overlay.linkOffColor);
		$(this.nextLinkEl).css('color', this.slide < this.data.count - 1 ? Overlay.linkOnColor : Overlay.linkOffColor);
	}
}