/*
 * Author: Oskar Thorin, oskar@thor.in
 *
 */



var displayInitialized = false;
function Display(selector, attribute) {

	if(typeof($) == 'undefined' && typeof(jQuery) == 'undefined')
		return;
	if(typeof($) == 'undefined')
		var $ = jQuery;

	if(displayInitialized)
		return;

	if(!selector)
		selector = 'a[rel=display]';

	if(!attribute)
		attribute = 'href';

	displayInitialized = true;

	this.jsFilename = 'display.js';
	this.cssFilename = '../style/display.css';

	var speed = 1;
	var slow = 600/speed;
	var fast = 200/speed;
	var def = 400/speed;

	var marginTop = 20;
	var marginRight = 20;
	var marginBottom = 20;
	var marginLeft = 20;

	//var imageMoveOffset = 100;

	var imageChangeDirection = 0;
	var imageChangePossible = true;

	var visible = false;
	var sliding = false;
	var loading = false;
	var over = false;

	var elements = new Array();
	var current = 0;

	var width = $(window).width();
	var height = $(window).height();

	var scrollTop = $(window).scrollTop();

	var constructObj = [
		['div', {'id':'display'}, [
			['div', {'class':'_background'}],
			['div', {'class':'_foreground'}, [
				['div', {'class':'_image'}, [
					['div', {'class':'_error'}],
					['div', {'class':'_glass'}],
					['a', {'class':'_x'}],
					['a', {'class':'_go', 'rel':'1'}, '»'],
					['a', {'class':'_go', 'rel':'-1'}, '«'],
					['div', {'class':'_text'}, [
						['span'],
						['div']
					]],
					['img', {'src':'/blank.gif', 'alt':''}]
				]]
			]]
		]],
		['div', {'id':'display_extra'}],
		['div', {'id':'display_brake'}]
	];

	var $this = this;

	this.init = function() {
		this.css();
		this.assign();
		this.create($(document.body), constructObj);

		$('#display ._glass').css('opacity', 0.01);

		$('#display').click($this.click);
		$('#display').mousemove($this.mousemove);
		$('#display ._glass').mouseover($this.mouseover);
		$('#display ._glass').mouseout($this.mouseout);
		$(window).resize($this.resize);
		$(window).keydown($this.keydown);
	}
	
	this.create = function(container, obj) {
		if(typeof(obj) == 'string') {
			container.html(obj);
			return;
		}
		for(var i in obj) {
			if(typeof(obj[i]) == 'object') {
				var node = $(document.createElement(obj[i][0]));
				if(obj[i][1])
					node.attr(obj[i][1]);
				container.append(node);
				if(obj[i][2])
					this.create(node, obj[i][2]);
			} else {
				container.append(obj[i]);
			}
		}
	}


	this.assign = function() {
		elements = new Array();
		$(selector).each(function() {
			var obj = $(this);
			if(!obj.attr(attribute))
				return;
			var i = elements.length;
			if(elements[i-1]) {
				obj.data('p', i-1);
				$(elements[i-1]).data('n', i);
			}
			obj.data('i', i);
			elements.push(this);
		});
		$(elements).click(function() {
			$this.view($(this).data('i'));
			return false;
		});
	}

	this.load = function(i, callback) {
		var src = $(elements[i]).attr(attribute).replace(/\/([^\/]+)$/, '/'+(height-80)+'/$1');
		//console.log(src);

		return elements[i] ? $(new Image()).load(callback).attr('src', src) : false;
	}

	this.update = function() {
		if(!visible)
			return false;
		return $this.view(current);
	}

	this.go = function(d) {
		if(!visible)
			return false;
		return $this.view(current+d);
	}

	this.view = function(i, callback) {
		if(!elements[i])
			return false;

		var image = new Image();

		loading = true;
		current = i;

		var load = false;
		var fade = false;
		var timeout = null;

		var loadCallback = function() {
			load = true;
			if(fade) {
				window.clearTimeout(timeout);
				display();
			}
		};
		var fadeCallback = function() {
			fade = true;

			if(!elements[current+imageChangeDirection])
				$('#display ._go').hide(slow);

			if(load) {
				display();
				$(this).dequeue();
				return
			}
			timeout = window.setTimeout(function() {
				$('#display ._error').text('Ett fel har uppstått');
				$('#display ._image img').attr('src', 'about:blank').removeAttr('alt');
				loading = false;
				if(callback)
					callback();
			}, 8000);
			$(this).dequeue();
		};
		var display = function() {
			if(i != current)
				return false;

			var fade = false;
			var size = false;

			$('#display ._image img').attr({
				'src': image.src,
				'width': image.width,
				'height': image.height
			});
			$('#display ._text > div').text($(elements[i]).attr('title'));
			$('#display ._text > span').text(i+1 + '/' + elements.length);
			var imageWidth = image.width;
			var imageHeight = image.height;
			var borderTopWidth = parseInt($('#display ._image').css('borderTopWidth'));
			var textBorderTopWidth = parseInt($('#display ._text').css('borderTopWidth'));
			var textHeight = parseInt($('#display ._text').css('height'));
			var borderBottomWidth = parseInt($('#display ._image').css('borderBottomWidth'));
			var borderLeftWidth = parseInt($('#display ._image').css('borderLeftWidth'));
			var borderRightWidth = parseInt($('#display ._image').css('borderRightWidth'));
			var top = (height-marginTop-borderTopWidth-imageHeight-textBorderTopWidth-textHeight-borderBottomWidth-marginBottom)/2+marginTop;
			var left = (width-marginLeft-borderLeftWidth-imageWidth-marginRight-borderRightWidth)/2+marginLeft;
			//var bottom = top+borderTopWidth+imageHeight+textBorderTopWidth+textHeight+borderBottomWidth+marginBottom;
			//var extra = $(window).scrollTop()+ (bottom > $(window).height() ? $(window).height() : bottom);
			var extra = $(window).scrollTop()+$(window).height();
			$('#display ._image').animate({'width': imageWidth, 'left': left, 'marginLeft':0}, fast, function() {

				$('#display_extra').css({'top': extra});
				$('#display ._image').animate(
					{
						'height': imageHeight+$('#display ._text').height()+parseInt($('#display ._text').css('borderTopWidth')),
						'top': top,
						'marginTop':0
					},
					fast,
					function() {
						size = true;
						if(fade) {
							$('#display ._text, #display_extra').fadeIn(def);
							loading = false;
						}
					}
				);
			});

			$('#display ._image > img').fadeIn(def, function() {
				fade = true;
				if(size) {
					$('#display ._text, #display_extra').fadeIn(def);
					loading = false;
				}
			});
			return true;
		};

		$('#display_brake').css({'top': $('#display_extra').offset().top+$('#display_extra').height()});
		$('#display ._error').empty();
		visible
			? $('#display ._image img, #display ._text, #display_extra').fadeOut(fast)
			: $('#display ._image img, #display ._text, #display_extra').hide();
		$('#display ._image img').queue(fadeCallback);

		$this.show();
		image.onload = loadCallback;
		image.src = $(elements[i]).attr(attribute).replace(/\/([^\/]+)$/, '/'+(height-80)+'/$1');
		if(elements[i+1])
			new Image().src = $(elements[i+1]).attr(attribute).replace(/\/([^\/]+)$/, '/'+(height-80)+'/$1');
		if(elements[i-1])
			new Image().src = $(elements[i-1]).attr(attribute).replace(/\/([^\/]+)$/, '/'+(height-80)+'/$1');
		return true;
	}

	this.show = function() {
		if(visible)
			return false;

		scrollTop = $(window).scrollTop();
		sliding = true;

		var image = $('#display ._image');
		var borderTopWidth = parseInt(image.css('borderTopWidth'));
		var borderLeftWidth = parseInt(image.css('borderLeftWidth'));
		var top = (height-parseInt(image.css('height'))-marginBottom-marginTop)/2+borderTopWidth;
		var left = (width-parseInt(image.css('width'))-marginLeft-marginRight)/2+borderLeftWidth;
		image.css({'top':top, 'left':left});

		$('#display ._go').hide();
		$('#display ._foreground').fadeIn(def);
		$('#display').slideDown(slow, function() {
			visible = true;
			sliding = false;
		});
		return true;
	}

	this.hide = function() {
		if(!visible)
			return false;

		sliding = true;
		//console.log('hide');
		$('html, body').animate({'scrollTop': scrollTop}, fast, function() {
			$('#display_brake').css('top', 0);
			$('#display ._foreground, #display_extra').fadeOut(def);
			$('#display').slideUp(slow, function() {
				visible = false;
				sliding = false;
			});
		});
		return true;
	}

	this.mouseover = function(e) {
		over = true;
		//console.log('fadein');
// 		$('#display ._x').stop(true,true).fadeTo(slow, 0);
	}

	this.mouseout = function(e) {
		over = false;
		$('#display ._go').hide();
		//console.log('fadeout');
// 		$('#display ._x').stop(true,true).fadeTo(slow, 1);
	}

	this.mousemove = function(e) {

		if(!e)
			return false;

		if(!loading) {

			var imageWidth = $('#display ._image').width();
			var imageHeight = $('#display ._image').height();
			var borderTopWidth = parseInt($('#display ._image').css('borderTopWidth'));
			var textBorderTopWidth = parseInt($('#display ._text').css('borderTopWidth'));
			var textHeight = parseInt($('#display ._text').css('height'));
			var borderBottomWidth = parseInt($('#display ._image').css('borderBottomWidth'));
			var borderLeftWidth = parseInt($('#display ._image').css('borderLeftWidth'));
			var borderRightWidth = parseInt($('#display ._image').css('borderRightWidth'));

			var diffY = height-marginTop-borderTopWidth-imageHeight-textBorderTopWidth-textHeight-borderBottomWidth;
			var diffX = width-marginLeft-borderLeftWidth-imageWidth-borderRightWidth-marginRight;

			var offsetTop = diffY*(e.clientY/height-1/2);//*(height+imageMoveOffset/2)/height;
			var offsetLeft = diffX*(e.clientX/width-1/2);//*(width+imageMoveOffset/2)/width;

			$('#display ._image').css({'marginTop': (diffY < 0 ? offsetTop : 0), 'marginLeft': (diffX < 0 ? offsetLeft : 0)});
		}

		if(over) {
			var position = e.clientX-$('#display ._glass').offset().left;
			var center = $('#display ._glass').width()/2;

			newImageChangeDirection = (position-center)/Math.abs(position-center);
			if(imageChangeDirection != newImageChangeDirection) {
				imageChangeDirection = newImageChangeDirection;
				var show = $('#display ._go[rel=' + imageChangeDirection + ']');
				var hide = $('#display ._go[rel=' + (-1*imageChangeDirection) + ']');
				//hide.animate({'bottom':'-'+hide.css('height')},def);
				hide.hide();
				if(elements[current+imageChangeDirection]) {
					imageChangePossible = true;
					$('#display ._glass').css('cursor', 'pointer');
					//show.animate({'bottom':0+textBorderTopWidth},def);
					show.show();
				} else {
					imageChangePossible = false;
					$('#display ._glass').css('cursor', 'default');
					//show.animate({'bottom':-100},def);
					show.hide();
				}
			}
		} else {
			imageChangeDirection = 0;
		}
		return true;
	}

	this.click = function(e) {
		if(over) {
			$this.go(imageChangeDirection);
			return;
		}
		$this.hide();
	}

	this.resize = function(){
		width = $(window).width();
		height = $(window).height();
		
		//$(selector).each(function() {
		//	$(this).attr('href', $(this).attr('href').replace(/\/[0-9]+\//, '/'+(height-80)+'/'));
		//	console.log($(this).attr('href'));
		//});

		$this.update();
	}

	this.keydown = function(e) {
		switch(e.which) {
			case 37:
				$this.go(-1);
				break;
			case 39:
				$this.go(1);
				break;
		}
		//console.log(e);
	}
	this.css = function() {
		if($('link[href$=\'' + this.cssFilename + '\']').length < 1) {
			filepath = $('script[src$=\'' + this.jsFilename + '\']').attr('src');
			path = filepath.substring(0, filepath.length-this.jsFilename.length);
			if(path.length > 0 && path.charAt(path.length-1) != '/')
				path += '/';
			$('head').append('<link type="text/css" rel="stylesheet" href="' + path + this.cssFilename + '"/>');
		}
	}

	this.init();
	
}

//if(typeof($) != 'undefined')
	//$(document).ready(function() {new Display()});