var Window = Class.create();

Window.prototype = { 
  	pageSize: {},
  	windowScroll: {},
  	initialize: function() {
  	  	this.eventOnLoad   = this.windowOnLoad.bindAsEventListener(this);
  	  	this.eventOnResize = this.windowOnResize.bindAsEventListener(this);

		Event.observe(window, 'load', this.eventOnLoad);
		Event.observe(window, 'resize', this.eventOnResize);
		Event.observe(window, 'scroll', this.eventOnResize);
	},

	windowOnLoad: function(){
	  	this.windowScroll = this.getWindowScroll();	
	},
	
	windowOnResize: function(){
	  	this.windowScroll = this.getWindowScroll();
	},

	// From script.aculo.us
    getWindowScroll: function() {
        var w = window;
            var T, L, W, H;
            with (w.document) {
                if (w.document.documentElement) {
                    T = documentElement.scrollTop;
                    L = documentElement.scrollLeft;
                } else if (w.document.body) {
                    T = body.scrollTop;
                    L = body.scrollLeft;
                }
                if (w.innerWidth) {
                    W = w.innerWidth;
                    H = w.innerHeight;
                } else if (w.document.documentElement && documentElement.clientWidth) {
                    W = documentElement.clientWidth;
                    H = documentElement.clientHeight;
                } else {
                    W = body.offsetWidth;
                    H = body.offsetHeight
                }
            }
            return { top: T, left: L, width: W, height: H };
        
    }

}

var Win = new Window;

Event.onDOMReady(function() {
  	Win.eventOnLoad();	
});

var DescLayer = Class.create();

DescLayer.prototype = { 
  	layer_id: 'popup-desc-layer',
  	initialize: function() {
		this.updatePos = this.update.bindAsEventListener(this);
  	  	this.hideLayer = this.hide.bindAsEventListener(this);
	},

	show: function(element, theTitle, theContent){
	  	Event.observe(element, 'mousemove', this.updatePos);
  		Event.observe(element, 'mouseout', this.hideLayer);

  		element.style.cursor = 'pointer';

  		$$('#'+this.layer_id+' .ptitle')[0].innerHTML = theTitle;
  		$$('#'+this.layer_id+' .pcontent')[0].innerHTML = theContent;				
	},
	
	update: function(e){
	  	$(this.layer_id).show();
	  	var objHeight = $(this.layer_id).offsetHeight;
		var objWidth = $(this.layer_id).offsetWidth;
		
		var addX = (Win.windowScroll['width']+Win.windowScroll['left'] < Event.pointerX(e)+objWidth+35)? (-objWidth-15) : (+15);
		var addY = (Win.windowScroll['height']+Win.windowScroll['top'] < Event.pointerY(e)+objHeight+15)? (-objHeight-2) : (+5);
	
		var x = Event.pointerX(e) + addX;	
		var y = Event.pointerY(e) + addY;
				
		if(x < Win.windowScroll['left']) x=Win.windowScroll['left'];
		if(y < Win.windowScroll['top']) y=Win.windowScroll['top'];
		
		$(this.layer_id).style.left = x+"px";	
		$(this.layer_id).style.top = y+"px";
	},
	
	hide: function(){
	  	$(this.layer_id).hide();
	}

}

var Desc = new DescLayer;