window.addEvent('domready',function() {
	modal = new modalWindow({});

});

var modalWindow = new Class({
	////////////////////////////////////////
	// Variables and options
	////////////////////////////////////////
	Implements: [Options,Events],
	options: {
		height: 200,
		width: 450,
		borderWidth:15,
		content: '',
		identifier: 'modal'

	},
	//theCon: new Element('div',{'id':'mootools-modal-con'}),
	theTable: new Element('table',{'id':'mootools-modal'}),
	isShowing: true, // SET TO FALSE, TRUE FOR TESTING
	effectOpac: null,
	effectHeight: null,
	effectWidth: null,
	effectTop: null,
	effectLeft: null,
	tags: [],

	initialize: function(options) {
		var that = this;
		this.setOptions(options);

		

		////////////////////////////////////////
		// Set up the table
		////////////////////////////////////////
		this.theTable.adopt(
			Element('tbody').adopt(
				Element('tr').adopt(
					Element('td',{'class':'top-left'}),
					Element('td',{'class':'top'}),
					Element('td',{'class':'top-right'})
				),
				Element('tr').adopt(
					Element('td',{'class':'mid-left'}),
					Element('td',{'class':'content'}).adopt(
						Element('div')
					),
					Element('td',{'class':'mid-right'})
				),
				Element('tr').adopt(
					Element('td',{'class':'bottom-left'}),
					Element('td',{'class':'bottom'}).adopt(
						Element('div',{'id':'modal-close'})
					),
					Element('td',{'class':'bottom-right'})
				)
			)
		);
		
		this.theTable.setProperties({'cellpadding':0,'cellspacing':0});
		
		

		// GET A tags
		$$('a').each(function(item,index,array) {
			//alert( item.getProperty('rel') + " " + item.getProperty('rel').test( that.options.identifier ) );

			if( item.getProperty('rel') != null && item.getProperty('rel').contains( that.options.identifier ) ) {

				item.addEvent('click',function(event) {
					
					var target = event.target;
				//	alert(target.tagName)
					while( target.tagName != 'A' ) {
						target = target.parentNode;
					}
				//	alert(target.tagName)
					var rel = target.getProperty('rel');
					var theURL = target.getProperty('href')

					var dims = {
							url: theURL
					}

					if ( rel.test(/(\d+)x(\d+)/) ) {
						var left = /(\d+)x\d+/;
						var right = /\d+x(\d+)/;
						
						var theHeight = right.exec(rel)[1];
						var theWidth = left.exec(rel)[1];
						
							dims.height = theHeight;
							dims.width= theWidth;
					}
					
					that.setContent(dims);
					return false;
				});
			}
		});
		

		$$('body').adopt( this.theTable );
		$$('head').adopt( Element('link',{'rel':'stylesheet','href':'css/mootools-modal.css','type':'text/css'}) )
		$('modal-close').set('html','CLOSE').addEvent('click',function(){that.hide();});
		//this.setPosition(this.options.height,this.options.width);
		//this.show();


		this.effectOpac = new Fx.Tween(this.theTable,{'duration':'short'});
		this.effectHeight = new Fx.Tween(this.theTable.getElement('td.content div'),{'duration':'normal'});
		this.effectWidth = new Fx.Tween(this.theTable.getElement('td.content div'),{'duration':'normal'});
		this.effectTop = new Fx.Tween(this.theTable,{'duration':'normal'});
		this.effectLeft = new Fx.Tween(this.theTable,{'duration':'normal'});
	},

	show: function( opts ) {
		//alert(window.getSize().y/2)-((height/2)+this.options.borderWidth);
		if ( opts == undefined ) opts = {};
		//alert(this.theTable.getPosition().x);
		var height = (opts.height != undefined )?opts.height:this.options.height;
		var width = (opts.width!= undefined )?opts.width:this.options.width;

		

		this.setPosition(height, width);
		this.theTable.setStyle('display','block');
		this.effectOpac.start('opacity',.99);
		this.effectHeight.start('height',0,height);
		this.effectWidth.start('width',0,width);
		this.effectTop.start('top',this.theTable.getPosition().y + (height/2),this.theTable.getPosition().y);
		this.effectLeft.start('left',+this.theTable.getPosition().x + (width/2),this.theTable.getPosition().x);
		
		
	},
	hide: function() {
		this.theTable.setStyles({
			display: 'none',
			opacity: 0
		})
	},
	setPosition: function(height,width) {
		this.theTable.setStyles({
			top: (window.getSize().y/2)-((height/2)+this.options.borderWidth),
			left: (window.getSize().x/2)-((width/2)+this.options.borderWidth)
		});
		this.theTable.getElement('td.content div').setStyles({
			'height': height,
			'width': width
		});
	},
	setContent: function( opts ) {
		var that = this;
		if ( opts == undefined ) opts = {};
		if ( opts.url != undefined ) {
			var pattern = new RegExp(/.*(\.jpg|jpeg|gif|png)/i);

			if( pattern.test(opts.url) ) {
				var tmp = new Date();

				var img = Element('img',{'src':opts.url+'?b='+tmp.getTime()});
				var test = img.clone();
				test.setStyles({
					'visibility':'hidden',
					'position':'absolute',
					'bottom':0,
					'left':0
				})
				
				img.addEvent('load',function(){
					$$('body').adopt(test);
					var size = test.getSize();
					//alert( size.x + " x " + size.y );
					test.dispose();
					$$('#mootools-modal td.content div').set('html','').adopt(img);
					that.show({width:size.x,height:size.y});
					//that.show();
				});

				
					
			} else {
				$$('#mootools-modal td.content div').set('html','');
				var ajax = new Request.HTML({
					append:$$('#mootools-modal td.content div')[0],
					url:opts.url,
					method:'get',
					onComplete: function() {
						if ( opts.height != undefined && opts.width != undefined ) {
							that.show({height:opts.height,width:opts.width});
						} else {
							that.show();
						}
					}
				}).send();
			}
		}
	}
});