var Popup = new Class({
	Implements: [Options, Events],
	options: {
		debug: false,
		width: 400,
		height: 300
	},
	initialize: function(options) {
		this.setOptions(options);
		
		//this.Render();
		//this.Draggable();
	},
	TitleText: 'Unnamed window',
	Size: function(width,height){
		
		this.ContentFx.start({
			'width': width,
			'height': height
		});
		
	},
	Show: function(){
		this.WrapElement.inject( $(document.body) );
		this.WrapElement.fade('in');
	},
	Hide: function(){
		
		this.WrapElement.fade('out');
		(function(){
			this.WrapElement.dispose();
		}).bind(this).delay(500);
		
	},
	Render: function(){
		
		this.WrapElement = new Element('div', { 'class': 'adm-popup', 'styles': { 'opacity': 0 } });
			
			this.TitleElement = new Element('div', {
				'class': 'title',
				'html': this.TitleText
			}).inject( this.WrapElement );
			
			this.CloseElement = new Element('div', {
				'class': 'close',
				'html': 'Close Window',
				'events': {
					'click': this.Hide.bind(this)
				}
			}).inject( this.WrapElement );
			
			this.ContentElement = new Element('div', {
				'class': 'content',
				'styles': {
					'width': this.options.width,
					'height': this.options.height
				}
			}).inject( this.WrapElement );
			
			this.WrapFx = new Fx.Morph(this.WrapElement, {
				'duration': 500,
				'link': 'cancel',
				'transition': Fx.Transitions.Quad.easeInOut
			});
			this.ContentFx = new Fx.Morph(this.ContentElement, { 'duration': 750 });
		
		
		//this.WrapElement.inject( $(document.body) );
	},
	Draggable: function(){
		
		this.myDrag = this.WrapElement.makeDraggable({
			handle: this.TitleElement,
			limit: { 'x': [0,( $(document.body).getSize().x - this.WrapElement.getSize().x )], 'y': [0,$(document.body).getScrollSize().y - this.WrapElement.getSize().y] },
			onStart: function(){
				$$('iframe').setStyle('visibility', 'hidden');
			},
			onComplete: function(){
				$$('iframe').setStyle('visibility', 'visible');
			}
		});
		
		//window.addEvent('resize', this.Draggable.bind(this));
	}
});

var Lightbox = new Class({
	Extends: Popup,
	
	initialize: function(options) {
		this.parent(options);
		
		this.Render();
		this.RenderControllers();
		
		$(document.body).addEvent('click',function(e) { 
			if(this.WrapElement && !e.target || !$(e.target).getParents().contains(this.WrapElement))
				this.ZoomOut();
		}.bind(this));
		
		this.CloseElement.removeEvents('click');
		this.CloseElement.addEvent('click', this.ZoomOut.bind(this));
		
	},
	
	Images: [],
	CurrentImage: null,
	FxInProgress: false,
	
	RenderControllers: function(){
		this.PrevElement = new Element('a', {
			'class': 'arrow prev',
			'events': {
				'click': this.LoadPrev.bind(this),
				'mouseenter': (function(){
					this.PrevElement.fade('1');
				}).bind(this),
				'mouseleave': (function(){
					this.PrevElement.fade('0.01');
				}).bind(this)
			},
			'styles': {
				'opacity': 0.01
			}
		})
		
		this.NextElement = new Element('a', {
			'class': 'arrow next',
			'events': {
				'click': this.LoadNext.bind(this),
				'mouseenter': (function(){
					this.NextElement.fade('1');
				}).bind(this),
				'mouseleave': (function(){
					this.NextElement.fade('0.01');
				}).bind(this)
			},
			'styles': {
				'opacity': 0.01
			}
		})
		
		this.PrevElement.inject( this.WrapElement );
		this.NextElement.inject( this.WrapElement );
	},
	
	LoadNext: function(){
		var index = this.Images.indexOf(this.CurrentImage);
		
		if( ( index + 1 ) <= this.Images.length )
			this.PreloadImage( this.Images[ index+1 ], 'fade' );
	},
	LoadPrev: function(){
		var index = this.Images.indexOf(this.CurrentImage);
		
		if( ( index - 1 ) >= 0 )
			this.PreloadImage( this.Images[ index-1 ], 'fade' );
	},
	
	addImage: function(image){
		
		this.Images.include( image );
		this.attachEvents( image );
		
	},
	attachEvents: function(image){
		
		image.addEvent('click', function(event){
			event.stop();
			this.PreloadImage( image );
			
		}.bind(this));
		
	},
	PreloadImage: function(image, type){
		var ImageCoords = image.getCoordinates();
		
		var preloader = new Element('div', {
			'class': 'preloader',
			'styles': {
				'opacity': 0,
				'top': ImageCoords.top,
				'left': ImageCoords.left,
				'width': ImageCoords.width,
				'height': ImageCoords.height
			}
		});
		
		var preloader2 = new Element('div', {
			'class': 'preloader-big',
			'styles': {
				'opacity': 0
			}
		});
		
		
		preloader.inject( $(document.body) );
		preloader.fade('0.5');
		
		preloader2.inject( this.WrapElement );
		preloader2.fade('0.75');
		
		this.CurrentImage = image;
		
		var myImage = new Asset.image(image.get('href'), {
			id: 'myImage',
			title: image.get('title'),
			onload: (function(element){
				this.TitleElement.set('html', image.get('title'));
				
				if( type == 'fade' )
					this.FadeIn(image,element);
				else
					this.ZoomIn(image,element);
				
				preloader.fade('0');
				preloader2.fade('0');
				(function(){
					preloader.destroy();
					preloader2.destroy();
				}).bind(this).delay(500);
			}).bind(this)
		});
		
	},
	ZoomIn: function( image, element ){
		
		if( this.WrapElement.getParent() == null )
			this.WrapElement.inject( $(document.body) );
		else
			this.WrapFx.start({
				'opactity': 0
			});
			
		var ImageCoords = image.getCoordinates();
		var WindowSize = window.getSize();
		var scroll = window.getScroll();
		
		// Insert New Image
		this.insertImage( element.get('src') )
		
		
		
		var ElementWidth = element.get('width');
		var ElementHeight = element.get('height');
		
		element.setStyles({
			'width': '100%',
			'height': '100%'
		});
		
		var TopPos = ((WindowSize.y - ElementHeight) / 2)+scroll.y;
		var LeftPos = ((WindowSize.x - ElementWidth) / 2)+scroll.x;
		
		this.WrapElement.setStyles({
			opacity: 0,
			left: ImageCoords.left,
			top: ImageCoords.top,
			width: ImageCoords.width,
			height: ImageCoords.height
		});
		
		this.WrapFx.start({
			opacity: [0,1],
			top: [ImageCoords.top,TopPos],
			left: [ImageCoords.left,LeftPos],
			width: [ImageCoords.width,ElementWidth],
			height: [ImageCoords.height,ElementHeight]
		});
	},
	ZoomOut: function(){
		if( this.CurrentImage )
		{
		var ImageCoords = this.CurrentImage.getCoordinates();
		
		this.WrapFx.start({
			opacity: 0,
			top: ImageCoords.top,
			left: ImageCoords.left,
			width: ImageCoords.width,
			height: ImageCoords.height
		});
		
		this.CurrentImage = null;
		
		(function(){
			this.WrapElement.dispose();
		}).bind(this).delay(500);
		}
		
	},
	FadeIn: function( image, element ){
		var ImageCoords = image.getCoordinates();
		var WindowSize = window.getSize();
		var scroll = window.getScroll();
		
		// New Image
		var ElementWidth = element.get('width');
		var ElementHeight = element.get('height');
		
		// Pos
		var TopPos = ((WindowSize.y - ElementHeight) / 2)+scroll.y;
		var LeftPos = ((WindowSize.x - ElementWidth) / 2)+scroll.x;
		
		// Fx
		this.WrapFx.start({
			top: TopPos,
			left: LeftPos,
			width: ElementWidth,
			height: ElementHeight
		});
		
		// Insert New Image
		this.insertImage( element.get('src') )
		
	},
	
	insertImage: function( src ){
		var children = this.ContentElement.getElements('.image');
		
		children.fade('out')
		
		var foo = new Element('div',{
			'class': 'image',
			'styles': {
				'opacity': 0,
				'background-image': 'url('+ src +')'
			}
		}).inject( this.ContentElement );
		
		
		foo.fade('in');
		
		(function(){
			children.destroy();
		}).delay(500);
		
	}
	
});


window.addEvent('domready', function(){
	
	//var pop = new Popup({ width: 300, height: 300 });
	//var pop = new MediaPopup({ width: 400, height: 300 });
	
	//pop.Size( 500, 200 );
	//pop.CreateList();
	//pop.Show();
	//pop.Hide();
	
});