/*
Script: hoverident.js
	HoverIdent - mouse over/leave effect for list of elements

License:
	MIT-style license.

Copyright:
	Copyright (c) 2009 [cime](http://specialec.net/).
*/

(function($){ 
	this.Boxit = new Class({
		Implements: [Options, Events],
		
		el: null,
		content: null,
		overlay: null,
		fx: null,
		sr: null,

		options: {
			title: 'BoxIt',
			draggable: false
		},
		
		initialize: function(el, options){
			this.setOptions(options);
			var self = this;
			
			this.overlay = new Element('div', {
				id: 'overlay',
				styles: {
					'z-index': '500',
					'position': 'fixed',
					'top': '0',
					'bottom': '0',
					'left': '0',
					'right': '0',
					'background': '#000',
					'opacity': '0.6'
				}
			}).inject(document.body);
			
			this.el = new Element('div', {
				id: 'boxit',
				styles: {
					'z-index': '1000',
					'position': 'absolute',
					'top': '100px',
					'background': 'transparent',
					'background-image': 'url("/images/boxit.png")',
					'left': '100px',
					'border': '1px solid transparent',
					'-moz-border-radius': '10px',
					'-webkit-border-radius': '10px'
				}
			}).inject(document.body);
			
			this.content = new Element('div', {
				styles: {
					/*'width': '600px',
					'height': '500px',*/
					'background': '#fff',
					'margin': '10px'
				},
				
				html: '<h2 class="boxTitle" style="font-size: 18px; background: #528ab5; color: #fff; padding: 6px; font-weight: bold; border-bottom: 1px solid #aaa; margin: 0 !important;">BoxIt</h2><div style="min-width: 200px; max-width: 700px; min-height: 100px; margin: 0; padding: 0;" class="boxContent"><div style="margin: 4px;">Test</div></div><div class="boxFoot" style="text-align: right; padding: 4px 12px; background: #e3e3e3; border-top: 1px solid #ccc;"><a class="close" href="">Close</a></div>'
			}).inject(this.el);
			
			this.el.getElement('.boxContent div').set('html', el.get('html'));
			
			this.el.getElement('.boxTitle').set('text', el.get('title') ? el.get('title') : this.options.title);
			
			this.el.getElement('.boxFoot .close').addEvent('click', function(e){
				e.stop();
				self.hide();
			});
			
			if(this.options.draggable){
				this.el.makeDraggable({
					handle: this.el.getElement('.boxTitle'),
					onComplete: function(el){
						self.content.setStyle('opacity', '1.0');
						el.setStyle('opacity', '1.0');
					},
					onCancel: function(el){
						self.content.setStyle('opacity', '1.0');
						el.setStyle('opacity', '1.0');
					},
					onBeforeStart: function(el){
						self.content.setStyle('opacity', '0');
						el.setStyle('opacity', '0.7');
					}
				});
				this.el.getElement('.boxTitle').setStyle('cursor', 'move');
			}
			
			this.fx = new Fx.Tween(self.el, {
					onStart: function(){
					self.content.setStyle('opacity', '0');
					self.el.setStyle('opacity', '0.7');
				},
				onComplete: function(){
					self.el.setStyle('opacity', '1.0');
					self.content.setStyle('opacity', '1.0');
				}
			});
			
			this.sr = this.scrollresize.bind(this);
			this.center();
			this.show();
		},

		scrollresize: function(){
			var l = window.getSize().x / 2 - this.el.getSize().x / 2 + window.getScroll().x;
			var t = window.getSize().y / 2 - this.el.getSize().y / 2 + window.getScroll().y;
			this.el.setStyle('left', l + 'px');
			this.fx.cancel().start('top', t + 'px');
		},
		
		center: function(){
			var l = window.getSize().x / 2 - this.el.getSize().x / 2 + window.getScroll().x;
			this.el.setStyle('left', l + 'px');
			var t = window.getSize().y / 2 - this.el.getSize().y / 2 + window.getScroll().y;
			this.el.setStyle('top', t + 'px');
		},
		
		hide: function(){
			var self = this;
			var fx = new Fx.Tween(this.el, {
				onComplete: function(){
					self.overlay.hide();
				}
			});
			fx.start('opacity', '0');
			window.removeEvent('scroll', this.sr);
			window.removeEvent('resize', this.sr);
		},
		
		show: function(){
			this.overlay.show();
			this.el.fade('in');
			window.addEvent('scroll', this.sr);
			window.addEvent('resize', this.sr);
		},
		
		toggle: function(){
			if(this.el.getStyle('opacity') === '0'){
				this.show();
			} else {
				this.hide();
			}
		}
	});
})(document.id);

window.addEvent('load', function(){
	var f = new Boxit($("news"));
});