/*
Script: mindow.js
	An mootools extension which allows you to easily create overlay pop-ups.

License:
	MIT-style license.
*/

var Mindow = new Class({ 
	Implements: [Options],				   
	options: {
		overlayColor: '#000',
		opacity: 0.7,
		scrolling: false,
		isOpen: false,
		height: 400,
		width: 300
	},	
	initialize: function(source, options){
		// read in params
		this.source = source;
		this.setOptions(options);

		// determine scrolling
		(this.options.scrolling) ? this.scrolling = 'auto' : this.scrolling = 'hidden';
		// intialize the elements
		this.initHTML();
		
		// set trigger to fire mindow
		this.trigger = $(this.options.trigger);
		if(this.trigger){
			this.trigger.addEvent('click', function(e) {
				e = new Event(e).stop();
				this.openWindow();	
				this.loadWindow(this.source);
			}.bind(this));
		} else {
			this.openWindow();	
			this.loadWindow(this.source);			
		}
		// if you want window to be opened on load
		if (this.options.isOpen) {
		    this.openWindow();
		    this.loadWindow(this.source);
		}
		
		// move mindow when user scrolls
/*		window.addEvent('scroll', function(e) {
			if(this.mdowContainer.getStyle('display') == 'block') {
		    	this.setWindowScroll();
			}
		}.bind(this));	
*/
		// move mindow when user resizes 			
		window.addEvent('resize', function(e) {
			if(this.mdowContainer.getStyle('display') == 'block') {
		    	this.setWindowScroll();
			}
		}.bind(this));					

	},
	initHTML: function(){
		// create overlay		
		if(!$('mdowOverlay')){
			this.overlay = new Element('div', { 
				'id':'mdowOverlay',
				'styles': { 
					'height':0,
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'z-index': 100000001,
					'visibility': 'visible',
					'width': '100%',
					'overflow': 'hidden',
					'cursor': 'pointer',
					'opacity':0,
					'backgroundColor': this.options.overlayColor
				}
			}).inject($(document.body));	
			
		} else {
			this.overlay = $('mdowOverlay');	
		}
		
		// attach click event on overlay to close overlay
		this.overlay.addEvent('click', function(e) {
			e = new Event(e).stop();
			this.closeWindow();							
		}.bind(this));
	
		// create mindow & close button
		if (!$('mdow')) {
		    this.mdowContainer = new Element('div', {
		        'id': 'mdowContainer',
		        'styles': {
		            'display': 'none',
					'position': 'absolute',
					'z-index':100000002,
					'top': '50%',
					'left': 0,
					'width': '100%',
					'height': 1,
					'overflow': 'visible',
					'visibility': 'visible'
		        }
		    }).inject($(document.body));
		    
			this.mindow = new Element('div', {
				'id':'mdow', 
				'styles': {
					'display':'none',
					'position': 'absolute',
					'left': '50%',
					'background': '#fff'					
				}
            }).inject(this.mdowContainer);	
			
			this.btnclose = new Element('a',{
				'id':'mdowClose',
				'title':'close'
			}).set({'html':'> Kapat'}).inject(this.mindow);
		} else {
			this.mdowContainer = $('mdowContainer');
			this.mindow = $('mdow');	
			this.btnclose = $('mdowClose');
		}
		
		// attach event on close button
		this.btnclose.addEvent('click', function(e) {
			e = new Event(e).stop();
			this.closeWindow();							
		}.bind(this));
	    if(Browser.Engine.trident)this.btnclose.injectBefore(this.mindow);	
		this.btnclose.setStyle('display','none');			
	},
	loadWindow: function(source){
		// clear any html that might be in mindowso 
		this.mindow.set('html', '');
		this.setWindowScroll();

		this.mindow.setStyles({
		  	width: this.options.width,
		  	height: this.options.height,
			marginLeft: -(this.options.width / 2),
			marginTop: this.mindowTop/2,
			overflow: this.scrolling 
		});		
		// check to see if the souce is url or not
		if(source.indexOf('http') > -1){
			(this.scrolling == 'auto') ? this.iframescroll = 'yes' : this.iframescroll = 'no';
			this.myIframe = new Element('iframe', { 
				'id':'mdowIframe',
				'src': source,
				'frameborder': 0,
				'marginwidth': 0,
				'marginheight': 0, 
				'scrolling': this.iframescroll,
				'styles': { 
					'border': 0,
					'margin': 0,
					'width': this.options.width,
					'height': this.options.height
				}
			}).inject(this.mindow);
		} else {
			// is div on page
			this.mindow.set('html', $(source).innerHTML);
		}
		
		// inject close button
		this.btnclose.inject(this.mindow);
	},
	setWindowScroll: function(){
		//this.overlayContainer.setStyle('top', window.getScroll().y);
		this.mdowContainer.setStyle('top', window.getScroll().y);
        this.mindowTop = '50px';

		this.mindow.setStyle('top',  this.mindowTop)
	},
	openWindow: function() {
		// show overlay
		this.overlay.setStyle('height', window.getScrollSize().y);
		this.overlay.tween('opacity',this.options.opacity);

		// show box
		this.mdowContainer.setStyle('display', 'block');
		this.mindow.setStyle('display','block');
		this.btnclose.setStyle('display','block');
	},
	closeWindow: function(){
	    // hide box
	    this.mdowContainer.setStyle('display', 'none');
		this.mindow.setStyle('display','none');
		this.btnclose.setStyle('display', 'none');
	
		// hide overlay
		this.overlay.set('tween', {
			onComplete: function(e) {
				if(this.overlay.getStyle('opacity') == 0) {
					this.overlay.setStyle('height', '0');
				}
			}.bind(this)
		});
		this.overlay.tween('opacity', '0');		
        this.mindow.dispose();
	}	
});