var imageInfo = null;
var imagesInfo = new Array();
var state = null;
var window_top = 0;
var gallery = false;

$(document).ready(function(){
	window_top = $(window).scrollTop();
	console.log(window_top);
	// prepare external links
	$('a[@rel="external"]').click( function() {
		return !window.open( $(this).attr('href') );
	});
	// create background image tiles
	$('div.teaser,div.exhibition,div.artist,div.about,div.backroom').each(function() {
		$(this).css('background-image', 'url(' + $('img.main',this).attr('src') + ')');
	});
	// prepare overlay
	$('body').append('<div id="overlay"></div><div id="clickshield"></div><div id="gallery"><p><a class="prev" href="#">Previous</a>  |  <span class="counter">0 / 0</span>  |  <a class="next" href="#">Next</a>  |  <a href="#" class="close">Close</a></p><div class="image"><img alt="" /><div class="image-details"></div></div></div>');
	// prepare gallery
	$('#gallery').hide();
	$('#overlay').hide();
	$('#gallery').fadeTo(1, 0);
	$('#overlay').fadeTo(1, 0);
	$(window).scroll(
		function() {
			if(gallery != true) return;
			var nwindow_top = $(window).scrollTop();
			if(nwindow_top == window_top) return;
			var scroll_change = nwindow_top - window_top;
			var gallery_top = stripPX($('#gallery').css('top'));
			var gallery_height = $('#gallery').height() + 150;
			var window_height = $(window).height();
			if(gallery_height < window_height) $('#gallery').css('top',nwindow_top);
			else if(scroll_change > 0) {
				if(nwindow_top > gallery_height - window_height) $('#gallery').css('top',nwindow_top - (gallery_height - window_height));
			} else if (scroll_change < 0) {
				if(nwindow_top < gallery_top) $('#gallery').css('top',gallery_top - (gallery_top - nwindow_top));
				console.log('scroll_change : ' + scroll_change);
				console.log('window_top : ' + window_top);
				console.log('nwindow_top : ' + nwindow_top);
				console.log('gallery_top : ' + gallery_top);
				console.log('height difference : ' + (gallery_height - window_height));
			}
			$('#overlay').css('display','none');
			$('#overlay').css({height:$(document).height(),display:'block'});
			window_top = nwindow_top;
		}
	);
	$(window).resize(function () {
		if($('#gallery').height() + 150 < $(window).height()) $('#gallery').css('top', $(window).scrollTop());
		if($('#overlay').css('opacity') > 0) {
			$('#overlay').css('display','none');
			$('#clickshield').css('display','none');
			$('#overlay').css({height:$(document).height(),display:'block'});
			$('#clickshield').css({height:$(document).height(),display:'block'});
		}
	});
	$('ul.artworks>li[class!="artist"]>a').each(function() {
		var info = getImageInfo($(this).attr('href'));
		imagesInfo.push(info);
	}).click(function () {
		gallery = true;
		$('#gallery').show().fadeTo(1000, 1);
		$('#overlay').css('height',$(document).height()).show().fadeTo(1000, 0.9);
		$('#clickshield').css({height:$(document).height(),display:'block'});
		$('#gallery').css('top', $(window).scrollTop());
		displayArtwork($(this));
		return false;
	});
	$('#clickshield').click(function() {
		hideGallery();
		return false;
	});
	$('#gallery').click(function() {
		hideGallery();
		return false;
	});
	$('#gallery>p>a.close').click(function () {
		hideGallery();
		return false;
	});
	$('#gallery>div.image').click(function(){ return false;});
	$('#gallery>p>a.prev').click(getPrevArtwork);
	$('#gallery>p>a.next').click(getNextArtwork);
	$('#gallery>div.image>img').load(onImageLoaded);
	totalImages = $('ul.artworks>li[class!="artist"]>a').length;
});

function hideGallery() {
	if(gallery) {
		gallery = false;
		$('#clickshield').css('display','none');
		$('#gallery').stop().queue('fx',[]).fadeTo(1000, 0, function(){ $('#gallery').hide() });
		$('#overlay').stop().queue('fx',[]).fadeTo(1000, 0, function(){ $('#overlay').hide() });
	}
}

function stripPX(s) {
	if(s.indexOf('px') >= 0) s = s.substring(0,s.indexOf('px'));
	return (parseInt(s));
}

function getImageInfo(href) {
	href = href.substring(href.indexOf('/')+1,href.length-1);
	var id = href.substring(0,href.indexOf('/'));
	var url = href.substring(href.indexOf('/')+1, href.length);
	return {id:id, url:url};
}

function getPrevArtwork() {
	var element = $('ul.artworks>li>a[href="artworks/'+imageInfo.id+'/'+imageInfo.url+'/"]');
	element = element.parent().prevAll('[class!="artist"]').eq(0).children('a');
	if(element.length == 0) element = $('ul.artworks>li[class!="artist"]:last>a');
	displayArtwork(element);
	return false;
}

function getNextArtwork() {
	var element = $('ul.artworks>li>a[href="artworks/'+imageInfo.id+'/'+imageInfo.url+'/"]');
	element = element.parent().nextAll('[class!="artist"]').eq(0).children('a');
	if(element.length == 0) element = $('ul.artworks>li[class!="artist"]:first>a');
	displayArtwork(element);
	return false;
}

function displayArtwork(element) {
	var info = getImageInfo(element.attr('href'));
	if(imageInfo != null && info.id == imageInfo.id) return;
	imageInfo = info;
	var index = null;
	for (var i = 0; i < imagesInfo.length; i++) {
		if(imagesInfo[i].id != imageInfo.id) continue;
		index = i+1;
		break;
	}
	$('#gallery>p>span.counter').html(index + ' / ' + imagesInfo.length);
	if (state == 'hide') return;
	if (state == 'resize') {
		$('#gallery>div.image').stop().queue('fx',[]);
		onImageHidden();
		return;
	}
	state = 'hide';
	$('#gallery>div.image>div.image-details').fadeOut(500);
	$('#gallery>div.image>img').fadeOut(500,onImageHidden);
}

function onImageHidden() {
	if($('#gallery>div.image>img').attr('src') != '_img/artworks/' + imageInfo.id + '.jpg') {
		state = 'load';
		$('#gallery>div.image>img').attr('src','_img/artworks/' + imageInfo.id + '.jpg');
		loadImageData();
	} else onImageResized();
}

function loadImageData() {
	$.ajax({
		url: 'artworks/' + imageInfo.id + '/' + imageInfo.url + '/xml/',
		type: 'GET',
		dataType: 'xml',
		timeout: 5000,
		error: loadImageData,
		success: onArtworkXMLLoaded
	});
}

function onImageLoaded() {
	var nw = $(this).width();
	var nh = $(this).height();
	var element = $(this).parent();
	if($(this).attr('src') != '_img/artworks/' + imageInfo.id + '.jpg') return;
	state = 'resize';
	if(nw != element.width() || nh != element.height()) element.animate({width:$(this).width(),height:$(this).height()},1000,'swing',onImageResized);
	else onImageResized();
}

function onImageResized() {
	state = 'show';
	$('#gallery>div.image>img').fadeIn(500);
	$('#gallery>div.image>div.image-details').fadeIn(500);
}

function onArtworkXMLLoaded(data) {
	var html = '';
	html += '';
	$('#gallery>div.details').html();
	var xml;
	if (typeof data == "string") {
		xml = new ActiveXObject("Microsoft.XMLDOM");
		xml.async = false;
		xml.loadXML(data);
	} else {
		xml = data;
	}
	$('artwork', xml).each(function(){
		var id = $('id',this).text();
		if (id != imageInfo.id) return false;
		var title = $('title',this).text();
		var artist = $('artist',this).text();
		var media = $('media',this).text();
		var width = $('width',this).text();
		var depth = $('depth',this).text();
		var height = $('height',this).text();
		var year = $('year',this).text();
		var edition = $('edition',this).text();
		var price = $('price',this).text();
		var output = '';
		if (title != null) output += '<h3 class="artwork">' + title + '</h3>';
		if (artist != null) output += '<h4 class="artist">' + artist + '</h4>';
		var info = '';
		if (media != '') info += media + '. ';
		var dimensions = '';
		if (width != '') dimensions += width + '”';
		if (depth != '') dimensions += (dimensions.length > 0 ? ' x ' : '') + depth + '”';
		if (height != '') dimensions += (dimensions.length > 0 ? ' x ' : '') + height + '”';
		if(dimensions.length > 0) info += dimensions + '. ';
		if (year != '') info += year + '. ';
		if (edition != '' && edition > 1) info += 'Edition of ' + edition + '. ';
		if (price != '') {
			if(price == 'contact') {
				info += '<a href="mailto:wil@le-gallery.ca?subject=Pricing for ' + title + ' (' + id + ')">Contact gallery for price</a>. ';
			} else {
				info += price;
				if (edition > 1) info += ' each';
				info += '. ';
			}
		}
		if (info.length > 0) output += '<p>' + info + '</p>';
		$('#gallery div.image-details').html(output);
		$('#gallery div.image-details a').click(function() { window.location = $(this).attr('href'); });
	});
}