// --------------------------------------------------------------------------------
//  jQuery extension code (lock + ie6 PNG code)
// --------------------------------------------------------------------------------

$.extend({
	lock: function(count, callback) {		
		var count = count;
		return function(e) {if (--count == 0) callback();}
	},
	isIE6: function() {return (($.browser.msie) && ($.browser.version == 6.0));}
});

$.fn.extend({
	ie6TransparentImage: function() {
		return this.each(function() {
			var div = $(document.createElement('div'));
			div.css({
				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $(this).attr('src') + "', sizingMethod='crop');",
				'width': $(this).attr('width') + 'px',
				'height': $(this).attr('height') + 'px'
			}).attr('id', $(this).attr('id')).attr('class', $(this).attr('class'));
			
			$(this).replaceWith(div);
		});
	},
	ie6TransparentBackground: function() {
		return this.each(function() {
        	        var re = /url\("http:\/\/[^\/]*([^"]*)"\)/;
	                m = re.exec($(this).css('background-image'));
	                if (m != null) {
	                        $(this).css({
					'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + m[1] + "', sizingMethod='crop');",
					'backgroundImage': 'none'
				});
	                }
		});
	}
});

var photopage = function() {
	var json_url;
	var current_proj;
	var current_page;
	var current_image;
	var num_images;
	var images_loaded;

	var dataset;

	var working;
	var image_cache;

	var progress_bar;

	function init(page, proj, image) {
		json_url = '/assets/data/' + page + '/' + proj + '/data.json?r=' + Math.random() * 10000;
		current_proj = proj;
		current_page = page;
		current_image = image + 1;
		working = true;

		$('#panel').hide();
		$('#thumbs').hide();
		$('#slider ul').hide();
	}

	function launch() {
		$.getJSON(json_url, process_data);
	}

	function load_images(data, ad_lock) {
		image_cache = [];

		var im_lock = $.lock(data.images.length, ad_lock);

		for (var i in data.images) {
			var x = $(document.createElement('img')).one('load', function() {images_loaded++; update_progress_bar(); im_lock();});
			image_cache.push(x);
			x.attr({'alt': data.images[i].alttext, 'title': '', 'src': '/assets/data/' + current_page + '/' + current_proj + '/' + data.images[i].image + '.jpg'});
		}
	}

	function create_panel(data, ad_lock) {
		var p = $(document.createElement('div')).attr('id', 'panel').html('<div class="inner"><div class="desc">' + data.description + '</div><div class="progress"><div class="bar"></div><p>Loading Images</p></div></div>').hide();
		$('#panel').replaceWith(p);

		ad_lock();
	}

	function create_thumbs(data, ad_lock) {
		var images = [];

		var count = 0;
		for (var i=0; i<data.images.length; i++) {
			if (!data.images[i].no_thumb) count++;
		}

		var im_lock = $.lock(count, function(){
			var t = $(document.createElement('div')).attr('id', 'thumbs').hide();

			function attach_handler(a, i) {
				a.bind('click', function(e) {
					if (working) return;
					if (i != current_image) {
						working = true;
						switch_to_image(i);
					}
				}).bind('mouseover', function(e) {
					$(e.target).stop().fadeTo('fast', 1.0);
				}).bind('mouseout', function(e) {
					thumb_fade(null, e.target);
				})
			}

			for (var i=0; i<data.images.length; i++) {
				if (!data.images[i].no_thumb) {
					attach_handler(images[i], (parseInt(i)+1));
					t.append(images[i]);
				}
			}

			$('#thumbs').replaceWith(t);
			ad_lock();
		});

		for(var i in data.images) {
			var x = $(document.createElement('img')).one('load', im_lock).addClass('thumb-' + (parseInt(i)+1));
			images.push(x);
			x.attr({'alt': 'Thumbnail:: ' + data.images[i].alttext, 'title': '','src': '/assets/data/' + current_page + '/' + current_proj + '/' + data.images[i].image + '_th.jpg'});
		}
	}

	function attach_to_slider(im1, im2, offset) {
		var s = $(document.createElement('div')).attr('id', 'slider');
		var u = $(document.createElement('ul')).css('width', '1012px');

		function attach(im) {
			var x = $(document.createElement('li')).append(image_cache[im-1]);
			if (dataset.images[im-1].overview != null) {
				var d = $(document.createElement('div')).attr('id', 'moving_overview').addClass('overview').html('<div>' + dataset.images[im-1].overview + '</div>');
				x.append(d);
			}

			u.append(x);
		}

		if (im2 != null) attach(im2);
		attach(im1);

		s.append(u);
		u.css('margin-left', offset)
		$('#slider').replaceWith(s);
	}

	function switch_to_image(image_num) {
		attach_to_slider(current_image, image_num, '-506px');
		current_image = image_num
		$('#slider ul').animate({marginLeft: '0px'}, function() {working = false;});
		$('#thumbs img').each(thumb_fade);

		if (dataset.images[image_num-1].description)
				$('#panel .desc').replaceWith($(document.createElement('div')).addClass('desc').html(dataset.images[image_num-1].description));
	}

	function thumb_fade(c, e) {
		if (!$(e).hasClass("thumb-" + current_image)) {
			$(e).stop().fadeTo('fast', 0.4);
		} else $(e).fadeTo('fast', 1.0);
	}

	function get_current_progress() {
		return parseInt((parseFloat(images_loaded) / num_images) * 100);
	}

	function update_progress_bar() {
		if (progress_bar == null) return;		

		var p = $('#panel .progress');
		var pbv = get_current_progress();

		$('.bar', p).progressbar('value', pbv);

		if (pbv == 100) p.stop().fadeOut();
	}

	function process_data(data) {
		dataset = data;
		num_images = data.images.length;
		images_loaded = 0;
		progress_bar = 0;

		setTimeout(function() {
			if (get_current_progress() < 100) {
				progress_bar = $('#panel .progress .bar').progressbar({value: 0});
				$('#panel .progress').show();
			}
		}, 750);

		var im_lock = $.lock(2, function() {
			attach_to_slider(current_image);

			$('#slider').hide();
			$('#slider ul').css('margin-left', 0).show();
			$('#slider').css('width', 0).show();
			$('#slider').animate({'width': '506px'});

			$('#thumbs').show();
			$('#thumbs img').css('opacity', 0).each(thumb_fade);
			working = false;
		});			

		var ad_lock = $.lock(2, function() {
			$('#panel>div').css('margin-left', '-342px').css('opacity', 0);
			$('#panel').show();

			$('#panel .progress').hide()
			update_progress_bar();

			$('#panel>div').animate({
				opacity: 1.0,
				marginLeft: 0
			}, 500, 'swing', im_lock);
		});

		load_images(data, im_lock);
		create_panel(data, ad_lock);
		create_thumbs(data, ad_lock);
	}

	return {
		init: init,
		launch: launch
	};
};

// --------------------------------------------------------------------------------
//  Initialisation
// --------------------------------------------------------------------------------

$(function() {
	if ($.isIE6()) $("img.filter").ie6TransparentImage();
});