// InformationOverlay, Copyright (c) 2009 Rise Up LLC (http://www.riseupdesign.com/), Requires mootools-1.2-core.js (http://mootools.net/)
var InformationOverlay = new Class({
    initialize: function(properties){
        this.properties.extend(properties);
        this.container = $(properties.container);
        this.element = $(properties.element);
        this.closeButton = $(properties.closeButton);
        
        if ($defined(this.container)) {
        	this.draw();
        }
        if (this.properties.displayed) {
        	this.show();
        }
    },
    container: null,
    element: null,
    content: null,
    icon: null,
    closeButton: null,
    displayed: false,
    properties: new Hash({
	    id: 'information_overlay',
	    container: null,
	    element: null,
	    data: null,
	    duration: 500,
    	transition: Fx.Transitions.Sine.easeOut,
	    iconImage: '/images/page_icon_opaque.png',
	    iconStyle: {
			'height': 43,
			'width': 38,
			'position': 'absolute',
			'right': 36,
			'bottom': 20,
			'opacity': .65,
			'zIndex': 100
	    },
	    hoverStyle: {
	    	'opacity': 1
	    },
	    displayImage: '/images/info_overlay.png',
	    displayStyle: {
			'width': 300,
			'height': 380,
			'position': 'absolute',
			'right': 36,
			'bottom': 20,
			'backgroundColor': '#ffffff',
			'opacity': .8,
			'zIndex': 100
	    },
	    contentStyle: {
	    	'margin': 30,
	    	'fontSize': '11px'
	    },
	    closeButtonStyle: {
	    	'position': 'absolute',
			'right': 18,
			'bottom': 16,
			'padding': 2,
			'border': '1px solid #737373',
			'fontSize': '10px',
			'cursor': 'pointer'
	    }
	}),
    draw: function(container) {
    	if ($defined(container)) {
    		this.container = $(container);
    	}
    	if (!$defined(this.element)) {
    		this.create();
    	}
    	if ($defined(this.container)) {
    		this.element.inject(this.container);
    	} else {
    		this.element.inject(document.body);
    	}
    },
    setData: function(data) {
    	this.properties.data = data;
    	if ($defined(this.closeButton)) {
    		this.closeButton = this.closeButton.dispose();
    	} else {
        	this.closeButton = new Element('a', {
        		'html': 'Close',
        		'styles': this.properties.closeButtonStyle,
        		'events': {
        			'click': this.hideEvent()
        		}
        	});
    	}
    	this.content.set('html', data);
		this.closeButton.inject(this.content);
    },
    dataEvent: function() {
    	var __object = this;
    	return function(data) {
    		__object.setData(data);
    	};
    },
    create: function() {
    	this.element = new Element('div', {
    		'id': this.properties.id,
    		'styles': this.properties.iconStyle,
    		'events': {
    			'click': this.showEvent(),
    			'mouseover': this.mouseOverEvent(),
    			'mouseout': this.mouseOutEvent()
    		}
    	});
    	this.icon = new Element('img', {
    		'src': this.properties.iconImage,
    		'alt': 'Info'
    	});
    	this.icon.inject(this.element);
    	this.content = new Element('div', {
    		'html': this.properties.data,
    		'styles': this.properties.contentStyle
    	});
    	this.closeButton = new Element('a', {
    		'html': 'Close',
    		'styles': this.properties.closeButtonStyle,
    		'events': {
    			'click': this.hideEvent()
    		}
    	});
		this.closeButton.inject(this.content);
    },
    show: function() {
    	var __object = this;
    	__object.icon = __object.icon.dispose();
		var showInfo = new Fx.Morph(__object.element, {
			duration: __object.properties.duration,
			transition: __object.properties.transition,
			link: 'cancel',
			onComplete: function() {
				__object.content.inject(__object.element);
				__object.displayed = true; 
			}
		});
		showInfo.start(__object.properties.displayStyle);
    },
    hide: function() {
    	var __object = this;
		__object.content = __object.content.dispose();
		var hideInfo = new Fx.Morph(__object.element, {
			duration:  __object.properties.duration,
			transition: __object.properties.transition,
			link: 'cancel',
			onComplete: function() {
				__object.displayed = false;
				__object.icon.inject(__object.element);
				__object.element.setStyle('backgroundColor', 'transparent');
			}
		});
		hideInfo.start(__object.properties.iconStyle);
    },
    mouseOverEvent: function() {
    	var __object = this;
    	return function(event){
    		event.stopPropagation();
    		if (!__object.displayed){
		    	__object.element.setStyles(__object.properties.hoverStyle);
    		}
    	};
    },
    mouseOutEvent: function() {
    	var __object = this;
    	return function(event){
    		event.stopPropagation();
    		if (!__object.displayed){
		    	__object.element.setStyles(__object.properties.iconStyle);
    		}
    	};
    },
    showEvent: function() {
    	var __object = this;
    	return function(event){
    		event.stopPropagation();
    		if (!__object.displayed) {
    			__object.show();
    		}
    	};
    },
    hideEvent: function() {
    	var __object = this;
    	return function(event){
    		event.stopPropagation();
    		if (__object.displayed) {
    			__object.hide();
    		}
    	};
    }
});