/*
PopoverWindow JavaScript Component
Copyright (C) 2010 JaxCore.com

this component was purchased from:
http://www.PopoverWindow.com

Visit us today to purchase your very own window code generator,
You'll be creating custom windows instantly!
*/

var PopoverWindow = new function() {
	this.path = '';
	this.loadingURL = 'loading.html';
	this.ready = false;
	this.shown = false;
	this.autoURL = '';
	this.defaultCount = 0;
	
	// default options
	this.defaults = {

		// settings
		width : 500,
		height : 400,
		left : null,
		top : null,
		icon : 'default',
		title : 'PopoverWindow',
		showOverlay : true,
		overlayClose : true,
		scrolling : true,
		showClose : true,
		fadeIn : true,
		fadeOut : true,
		drag : true,
		resize : true,
		roundedCorners : false,
		
		// theme
		titleFont : 'sans-serif',
		titleColor : 'black',
		titleSize : '8pt',
		titleWeight : 'normal',
		windowColor : '#c0c0c0',
		overlayColor : '000',
		overlayOpacity : 0.7,
		pageBorder : true,
		pageBorderSize : 1,
		pageBorderColor : '888',
		pageBorderStyle : 'solid',
		titlePadding : 2,
		windowPadding : 5
		
	};
	this.options = null;
	
	// setting the path is important
	// it is relative to the webpage from which the popup is launched
	// or you can set the full URL such as "http://example.com/popover/media"
	// no trailing slash on the path is required

	this.setPath = function(path) {
		this.path = path;
		this.loadingURL = path + '/loading.html';
	};
	
	this.overlayClick = function() {
		if (this.options.overlayClose) this.hide();
	}
	
	// assigns events
	this.init = function() {
		var pid = 'popover';
		PopoverWindow.insert(pid);
		
		if (dom.id(pid+'_main')) {
			this.elm = this.elements('popover');
			
			style.opacity(this.elm.overlay,0);
			
			var me = this;
			dom.addEvent(this.elm.overlay,'mousedown',function() {
				me.overlayClick();
			});
			dom.addEvent(this.elm.close,'mousedown',function() {
				me.hide();
			});
			dom.addEvent(this.elm.close,'mouseover',function() {
				me.closeOver();
			});
			dom.addEvent(this.elm.close,'mouseout',function() {
				me.closeOut();
			});
			dom.addEvent(this.elm.title,'mousedown',function(e) {
				me.dragStart(e);
			});
			dom.addEvent(this.elm.resize,'mousedown',function(e) {
				me.resizeStart(e);
			});
			dom.addEvent(document,'mouseup',function(e) {
				me.dragEnd(e);
				me.resizeEnd(e);
			});
			
			style.opacity(this.elm.cover,0);
			dom.addEvent(document,'mousemove',function(e) {  //this.elm.cover
				me.dragMove(e);
				me.resizeMove(e);
			});
			
			dom.addEvent(window,'scroll',function() {
				//me.reset();
			});
			dom.addEvent(window,'resize',function() {
				//me.resize();
			});
			
			PopoverWindow.ready = true;
			if (this.autoURL) this.show(this.autoURL);
		}
		//else alert(overlay+"PopoverWindow Error: DIV#popover_main element not found");
	};
	
	this.insert = function(pid,generator) {
		if (!generator) {
			var overlay = document.createElement('div');
			overlay.id = pid+'_overlay';
			overlay.className = 'popover_overlay';
			dom.prepend(overlay);
			
			var mousecover = document.createElement('div');
			mousecover.id = pid+'_mousecover';
			mousecover.className = 'popover_mousecover';
			dom.prepend(mousecover);
		}
		
		var main = document.createElement('div');
		main.id = pid+'_main';
		main.className = 'popover_main';
		
		if (generator) main.style.position = 'relative';
		else main.style.position = (client.features('fixed'))? 'fixed':'absolute';
		
		main.innerHTML = '<div id="'+pid+'_titlebar" class="popover_titlebar">\
			<a id="'+pid+'_title" class="popover_title" href="javascript://" title="Click to move Window"></a>\
			<a id="'+pid+'_close" class="popover_close" href="javascript://" title="Close Window">&nbsp;&nbsp;&nbsp;&nbsp;</a>\
		</div>\
		<a id="'+pid+'_resize" class="popover_resize" href="javascript://"></a>\
		<div id="'+pid+'_content" class="popover_content">'+
			(generator? 
			'<div id="'+pid+'_iframe" class="popover_iframe"></div>'
			:
			'<iframe id="'+pid+'_iframe" class="popover_iframe" '+(!this.defaults.scrolling?'scrolling="no"':'' )+' src="'+this.loadingURL+'" frameborder="0"></iframe>'
			)+
		'</div>';
		
		if (generator) dom.id('popover_generator').appendChild(main);
		else dom.prepend(main);
	};
	
	this.defaultLoad = function() {
		this.defaultCount++;
		if (this.defaultCount>1) {
			this.hide();
		}
	};
	
	this.closeOver = function() {
		this.elm.close.style.backgroundImage = 'url('+this.path+'/img/close.png)';
	};
	this.closeOut = function() {
		this.elm.close.style.backgroundImage = 'url('+this.path+'/img/closegrey.png)';
	};
	
	this.setTheme = function(theme) {
		this.theme = theme;
	};
	
	this.setOptions = function(options) {
		if (!options) options = this.defaults;
		for (var i in this.defaults) {
			if (typeof options[i]=='undefined') {
				options[i] = this.defaults[i];
			}
			else {
				if (parseInt(options[i])==options[i]) options[i] = parseInt(options[i]);
			}
		}
		this.options = options;
		return options;
	};
	
	// colorSync is an optional feature to synchronize the background of the popup page
	// this is not necessary if you explicitly set the background color in the CSS of your popover page.
	// to the color assigned in the PopupWindow options
	// to use this feature inclue the following code in your popup page html:
	/*
	
	<script language="javascript">
	if (parent.PopoverWindow) parent.this.colorSync(this);
	</script>
	
	*/
	this.colorSync = function(iframe) {
		if (this.options && this.options.pageColor) {
			var body;
			if (iframe.document) body = iframe.document.body;
			if (iframe.contentWindow) iframe.contentWindow.document.body;
			if (body) body.style.backgroundColor = this.options.pageColor;
		}
	};
	
	this.elements = function(pid) {
		return {
			main : dom.id(pid+'_main'),
			content : dom.id(pid+'_content'),
			iframe : dom.id(pid+'_iframe'),
			overlay : dom.id(pid+'_overlay'),
			close : dom.id(pid+'_close'),
			title : dom.id(pid+'_title'),
			resize : dom.id(pid+'_resize'),
			tab : dom.id(pid+'_tab'),
			titlebar : dom.id(pid+'_titlebar'),
			cover : dom.id(pid+'_mousecover')
		}
	}
	
	this.show = function(url, options, generator, nwidth, nheight) {
		/*if (!client.features('xhr')) {
			top.location = url;
			return;
		}*/

		// chrome doesn't redisplay the scrollbar if you hide it, and then show it
		//if (!generator && !jaxscript.supports('chrome') && !jaxscript.supports('activex')) document.body.style.overflow = "hidden";
		
		if (options) this.setOptions(options);
		var options = this.options;
		if (!this.ready) {
			this.autoURL = url;
			return; // auto show on init?
		}
		var d = (generator)? this.elements('generator') : this.elm;
		
		if (!generator) {
			style.visible(d.overlay,false);
			if (options.overlayColor!=null) {
				if (options.overlayColor=='0') options.overlayColor = '000'
				d.overlay.style.backgroundColor = '#'+options.overlayColor;
			}
		}
		
		if (options.showClose) {
			d.close.style.backgroundImage = 'url('+this.path+'/img/closegrey.png)';
			d.close.style.display = 'inline';
			d.close.style.right = options.windowPadding+'px';
			d.close.style.top = (options.windowPadding + options.titlePadding-2)+'px';
		}
		else {
			style.display(d.close,false);
		}
		
		//d.content.className = (options.roundedCorners)? 'popover_content popover_roundcontent':'popover_content';
		//d.titlebar.className = (options.roundedCorners)? 'popover_titlebar popover_titlebarround':'popover_titlebar';
		d.main.className = (options.roundedCorners)? 'popover_main popover_main_round':'popover_main';
		
		if (!generator) {
			//alert(d.iframe.scrolling);
			d.iframe.scrolling = (options.scrolling)? 'auto':'no';
			//alert(d.iframe.scrolling);
			//d.iframe.style.overflow = "hidden";
		}
		
		/*d.iframe.style.overflowX = (options.scrolling)? 'auto':'hidden';
		d.iframe.style.overflowY = (options.scrolling)? 'auto':'hidden';
		d.iframe.style.overflow = (options.scrolling)? 'auto':'hidden';*/
		
		if (generator) {
			options.width = 250;
			options.height = 200;
		}
				
		if (options.resize) {
			style.show(d.resize);
		}
		else {
			style.hide(d.resize);
		}
		
		d.content.style.padding = parseInt(options.windowPadding)+'px';
		
		if (!!options.pageBorderSize) {
			if (options.pageBorderColor=='0') options.pageBorderColor = '000';
			d.iframe.style.border = options.pageBorderSize+'px '+options.pageBorderStyle+' #'+options.pageBorderColor;
		}
		else d.iframe.style.border = '0';
		
		d.iframe.style.backgroundColor = '#'+options.pageColor;
		
		if (options.icon) {
			d.title.style.paddingLeft = '20px';
			var file = options.icon;
			if (file.indexOf('.')==-1) file += '.png';
			d.title.style.background = 'url('+this.path+'/img/'+file+') no-repeat center left';
		}
		else {
			d.title.style.paddingLeft = '0px';
			d.title.style.background = '';
		}
		
		if (options.titleColor) d.title.style.color = '#'+options.titleColor;
		else d.title.style.color = '#000';
		
		d.title.style.fontFamily = options.titleFont;
		d.title.style.fontSize = options.titleSize;
		d.title.style.fontWeight = options.titleWeight;
		d.title.style.paddingTop = options.titlePadding+'px';
		d.title.style.paddingBottom = options.titlePadding+'px';
		
		d.title.innerHTML = options.title;
		
		if (options.windowColor=='0') options.windowColor = '000';
		
		//alert(options.windowColor);
		
		//d.content.style.backgroundColor = '#'+options.windowColor;
		
		d.main.style.backgroundColor = '#'+options.windowColor; //'red'; //'#'+options.windowColor;
		///alert(d.main.style.backgroundColor);
		
		d.titlebar.style.paddingLeft = options.windowPadding+'px';
		d.titlebar.style.paddingTop = options.windowPadding+'px';
		d.titlebar.style.paddingRight = options.windowPadding+'px';
		
		//alert(d.titlebar.style.backgroundColor);
		
		//d.titlebar.style.backgroundColor = 'red';

		//d.titlebar.style.backgroundColor = '#'+options.windowColor;
				
		this.resizeWindow(options.width,options.height, generator);
		
		if (!generator) {
			this.resize(true);
			this.reset(true);
			
		}
		
		if (generator) {
			style.visible(d.main,true);
		}
		else {
			if (url) {
				d.iframe.src = url;
	
				style.visible(d.overlay,true);
				if (options.fadeIn) {
					var me = this;
					fx.fade(d.overlay,options.overlayOpacity,function() {
						style.visible(d.main,true);
						me.shown = true;
					},0.1,20);
				}
				else {
					style.opacity(d.overlay,options.overlayOpacity);
					style.visible(d.overlay,true);
					style.visible(d.main,true);
					this.shown = true;
				}
			}
		}
		this.onShow();
	};
	
	this.resizeWindow = function(width,height,generator) {
		var d = (generator)? this.elements('generator') : this.elm;
		var options = this.options;
		
		if (width<50) width = 50;
		if (height<30) height = 30;
		style.size(d.iframe,width,height);
		
		var cw = parseInt(width)+parseInt(options.pageBorderSize)*2;
		if (client.features('activex')) {
			cw -= options.pageBorderSize*2;
		}
		var mainwidth = width+options.pageBorderSize*2+options.windowPadding*2;
		
		d.content.style.width = cw+'px';

		var titleDim = dom.dimensions(d.title);

		var mainheight = height+options.pageBorderSize*2+options.windowPadding*2 + titleDim.h + options.windowPadding;
		
		style.size(d.main,mainwidth,mainheight);
		
		var tabd = dom.dimensions(d.title);
		var tbw = mainwidth-options.windowPadding*2;
		style.size(d.titlebar,tbw,tabd.h);
		
		var tbd = dom.dimensions(d.titlebar);
		d.content.style.top = tbd.h+'px';
		
		var title_dim = dom.dimensions(d.title);
		var titleH = title_dim.h + options.windowPadding;
		
		style.move(d.resize,width-15+parseInt(options.pageBorderSize)*2+parseInt(options.windowPadding)*2,height-16+parseInt(options.pageBorderSize)*2+parseInt(options.windowPadding)*2+titleH);
	}
	
	this.update = function(options) {
		dom.id('generator_main').style.zIndex = 0;
		this.show(null,options,true);
	}
	
	this.hide = function() {
		if (this.options.fadeOut) {
			style.visible(this.elm.main,false);
			
			var pop = this;
			fx.fade(this.elm.overlay,0,function() {
				pop._hide();
			},0.1,20);
		}
		else this._hide();
	};
	this._hide = function() {
		style.visible(this.elm.main,false);
		style.visible(this.elm.resize,false);
		style.visible(this.elm.overlay,false);
		//style.size(this.elm.overlay,0,0);
		//document.body.style.overflow = "auto";
		this.defaultCount = 0;
		this.elm.iframe.src = this.loadingURL;
		this.shown = false;
		this.onHide();
	};
	
	this.onShow = function() {};
	this.onHide = function() {};
	
	this.resize = function(override) {
		if (this.shown || override) {
			var win = dom.dimensions('#window');
			var page = dom.dimensions('#document');
			var w = win.w;
			var h = Math.max(page.h,win.h);
			
			//style.size(this.elm.overlay, w, h);
			style.height(this.elm.overlay, h);
		}
	};
	
	this.reset = function(override) {
		if (this.shown || override) {
			var window_size = dom.dimensions('#window');
			var page = dom.dimensions('#document');
			
			var main_size = dom.dimensions(this.elm.main);
			var content_size = dom.dimensions(this.elm.content);
			
			var x=y=0;
			
			var offsetX = 0; //(client.features('fixed'))? 0:page.x;
			var offsetY = 0; //(client.features('fixed'))? 0:page.y;
			
			if (client.features('fixed')) {
				offsetX = page.x;
				offsetY = page.y;

				x = offsetX + window_size.w/2-main_size.w/2;
				y = offsetY + window_size.h/2-content_size.h/2 - 30;
			}
			else {
				x = offsetX + window_size.w/2-main_size.w/2;
				y = page.x+100;
			}

			if (x<0) x = 0;
			if (y<0) y = 0;
			
			if (this.options.left!=='' && this.options.left!==null) x = this.options.left;
			if (this.options.top!=='' && this.options.top!==null) y = this.options.top;
			
			style.move(this.elm.main,x,y);
		}
	};
	
	this.dragStart = function(e) {
		if (this.options.drag) {
			var target = dom.eventTarget(e);
			this.mainXY = style.getXY(this.elm.main);
			//alert(this.mainXY.x);
			
			this.startPos = dom.eventAbsPosition(e);
			//alert(this.startPos.x);
			var d = dom.dimensions(this.elm.overlay);
			this.isDragging = true;
			style.size(this.elm.cover, d.w, d.h);
			style.visible(this.elm.cover,true);
			
			return dom.cancelEvent(e);
		}
	};
	
	this.dragEnd = function(e) {
		var c = this.elm.cover;
		this.isDragging = false;
		style.size(c,0,0);
		style.visible(c,false);		
	};
	
	this.dragMove = function(e) {
		if (this.isDragging) {
			var currentPos = dom.eventAbsPosition(e);
			var b = document.body;
			var dx = currentPos.x - this.startPos.x;
			var dy = currentPos.y - this.startPos.y;
			
			echo(dx+' '+dy);
			var x = this.mainXY.x + dx; // - this.docDim.x;
			var y = this.mainXY.y + dy; // - this.docDim.y;
			if (x<3) x=3;
			if (y<6) y=6;
			style.move(this.elm.main,x,y);
		}
	};
	
	this.resizeStart = function(e) {
		if (this.options.resize) {
			var target = dom.eventTarget(e);
			this.mainDim = dom.dimensions(this.elm.main);
			this.startPos = dom.eventAbsPosition(e);
			
			this.resizeW = parseInt(this.elm.iframe.style.width);
			this.resizeH = parseInt(this.elm.iframe.style.height);
			
			this.minWidth = Math.max(dom.dimensions(this.elm.tab).w+20,80);
			
			var d = dom.dimensions(this.elm.overlay);
			
			this.isResizing = true;
			
			style.size(this.elm.cover, d.w, d.h);
			style.visible(this.elm.cover,true);
			this.elm.cover.style.cursor = 'resize';
			
			return dom.cancelEvent(e);
		}
	};
	
	this.resizeEnd = function(e) {
		this.isResizing = false;
		style.size(this.elm.cover,0,0);
		style.visible(this.elm.cover,false);
	};
	
	this.resizeMove = function(e) {
		if (!this.isResizing) return;
		var currentPos = dom.eventAbsPosition(e);
		var dx = currentPos.x - this.startPos.x;
		var dy = currentPos.y - this.startPos.y;
		
		var nwidth = this.resizeW + dx;
		var nheight = this.resizeH + dy;
		
		this.resizeWindow(nwidth,nheight,false);
	};
	
	this.maximize = function(e) {
		style.move(this.elm.main,3,6);
		var window_size = dom.dimensions('#window');
		this.elm.iframe.style.width = window_size.w-40+'px';
		this.elm.iframe.style.height = window_size.h-60+'px';
	};

};

run(function() {
	PopoverWindow.init();
});