var pageSliders = {};
var currentPageSlider = null;

/**
	MooSlider version 0.1 alpha
	
	by Dmitri Fedortchenko
	Creative Commons 3.0 Attribution license.
	License information at: http://creativecommons.org
*/

var SlidingPage = new Class(
{
	Implements: Options,
	options: {
		duration: 500,
		duration2: null,
		transition: 'linear'
	},
	initialize: function(element, startElement, endElement, options)
	{
		this.setOptions(options);
		this.element = element;
		this.startElement = startElement;
		this.endElement = endElement;
		this.isOpen = false;
		this._firstRun = true;
		this._isRunning = false;
		
		this.effectFirst = null;
		this.effectSecond = null;
		
		this.endCoordinates = this.endElement.getCoordinates();
		this.endStyle = null;
		
		this.updateTargetElement();
		pageSliders[startElement.id] = this;
	},
	updateTargetElement: function()
	{
		var startCoordinates = this.startElement.getCoordinates();
		this.endStyle = this.element.getStyles('width','padding','height','top','left','position','display','margin');
		
		this.element.setStyles({
			'position':'absolute',
			'margin':0,'padding':0,
			'display':'none',
			'top':startCoordinates.top,
			'left':startCoordinates.left,
			'width':startCoordinates.width,//this.startElement.getStyle("width").toInt(),
			'height':startCoordinates.height//this.startElement.getStyle("height").toInt()
		});
	},
	toggle: function()
	{
		if (this.isOpen)
			this.close();
		else
			this.open();
	},
	open: function()
	{
		this.element.setStyles(
			{
				'display':null
				//'margin': this.endStyle.margin,
				//'padding': this.endStyle.padding
			});

		//TODO: offset problem, make sure that any offset is compensated here!
		// offset occurs when an element nested with an absolute/relative positioned element
		// reports its coordinates falsely
		var t1 = {
			'top': this.endStyle.top,
			'height': this.endStyle.height//getStyle("height").toInt()
		};
		var t2 = {
			'left': this.endStyle.left,
			'width': this.endStyle.width//getStyle("width").toInt()
		};
		
		this._runEffect(t1,t2);
		this.isOpen = true;
		this.startElement.addClass('activated');
	},
	_runEffect: function(transition1, transition2, endWithFunction)
	{
		if (this._firstRun == true)
		{
			this._firstRun = false;
			if (this.options.duration2 == null)
			{
				dur1 = dur2 = this.options.duration / 2;
			}	
			else
			{
				dur1 = this.options.duration;
				dur2 = this.options.duration2;
			}
			this.effectFirst = new Fx.Morph(this.element, {wait: false, duration: dur1});
			this.effectSecond = new Fx.Morph(this.element, {wait: false, duration: dur2, transition: this.options.transition});
		}
		
		if (this._isRunning == true)
		{
			this.effectFirst.cancel();
			this.effectSecond.cancel();
			this._isRunning = false;
		}

		var t = this;
		this._isRunning = true;
		this.effectFirst.start(transition1).chain(
			function() {
				t.effectSecond.start(transition2).chain(
					function(){
						if (endWithFunction != null)
							endWithFunction();
						
						t._isRunning=false;
					});
			}
		);

		
	},
	close: function()
	{	
		var coords = this.startElement.getPosition();
		var t1 = {
			'left': coords.x,
			'width': this.startElement.getStyle("width").toInt()
		};
		var t2 = {
			'top': coords.y,
			'height': this.startElement.getStyle("height").toInt()
		};

		var t = this;
		this._runEffect(t1,t2,function(){t.element.setStyle('display','none');});
		this.isOpen = false;
		this.startElement.removeClass('activated');		
	}
}
);


var mooSliderBlanketId = 'mooSliderDarkBlanket';
function updateCover()
{
    var coverOfDarkness = $(mooSliderBlanketId);
    coverOfDarkness.setStyles({
                'top': document.getScroll().y + "px",
                'left': '0px',
                'width': '100%',//document.getSize().x + "px",
                'height': (document.getSize().y + document.getScroll().y) + "px"
            });
    coverOfDarkness.removeClass("ajax-loading"); 
}

function createCover()
{
	if ($(mooSliderBlanketId) == null)
	{
		var coverOfDarkness = new Element('div', {
			'styles': {
				'position': 'absolute',
				'top': document.getScroll().y + "px",
				'left': '0px',
				'z-index': 50,
				'display': 'inline',
				'width': '100%',//document.getSize().x + "px",
				'height': (document.getSize().y + document.getScroll().y) + "px",
				'background-color': '#000',
				'opacity': '0.0'
			},
			'id': mooSliderBlanketId
		});
		document.body.appendChild(coverOfDarkness);
		coverOfDarkness.addClass("ajax-loading");
		coverOfDarkness.morph({'opacity':0.8});
		coverOfDarkness.addEvent('click', function(){closeAll(null);});
		window.addEvent('scroll', updateCover);
	}
}
function deleteCover()
{
	var coverOfDarkness = $(mooSliderBlanketId);
	if (coverOfDarkness != null)
	{
		coverOfDarkness.set('morph', {
			onComplete:function() {
				coverOfDarkness.destroy();
			}
		});
		coverOfDarkness.morph({'opacity':0});
		window.removeEvent('scroll', updateCover);
	}
}

function closeAll(except)
{	
	for (sKey in pageSliders)
	{
		var slider = pageSliders[sKey];
		if (sKey != except && slider.isOpen)
		{
			slider.close();
		}
	}
	if (!except) deleteCover();
}

var loadedImages = {};
var zoomedImageObject = new Image();

window.addEvent('domready', function()
{
	$$(".imageZoom").each(function(img,i )
	{
		// if (img.name.substr(img.name.length-25,img.name.length) != img.src.substr(img.src.length-25,img.src.length))
		if (img.name != img.src)
		{
			img.set('style','cursor:pointer;cursor:hand;');
			img.set('title','Klicka på bilden för att förstora den.');
		
				
			img.addEvent("click", function(event)
			{
				var slideIt = function(id, width, height)
				{
					pageSliders[id].element.setStyles({
						'top': ((document.getSize().y-height)/2)+document.getScroll().y,
						'left': ((document.getSize().x/2)-(width/2)),
						'width': width,
						'height': height,
						'z-index': '+99'
					});
					pageSliders[id].updateTargetElement();
					pageSliders[id].toggle();
				}
				zoomedImageObject = new Asset.image(img.name,
				{
					onload:function()
					{
						slideIt(img.id, zoomedImageObject.width,zoomedImageObject.height);
					}
				});
			
				if (loadedImages[img.id] == null)
				{
					var zoomedImage = new Element(
							'img', {
							'styles': {
								'position': 'absolute',
								'cursor': 'pointer',
								'z-index': '200',
								'display': 'none'
							},
							'src': img.name,
							'class': 'imageZoomedBorder',
							'id': img.id+'-maximized'
						});

					document.body.appendChild(zoomedImage);
					new SlidingPage(zoomedImage,img,zoomedImage);
				
					zoomedImage.addEvent("click", function(event) { closeAll(null); } );
					zoomedImageObject.src = img.name;
				
					loadedImages[img.id] = img.name;
				}
				else
				{
					zoomedImageObject.src = loadedImages[img.id];
				}
			
				createCover();

				closeAll(img.id);
				return false;
			});
		}
	});
});