if (typeof DROW == 'undefined') var DROW = {};

DROW.tip = Class.create({
	
    initialize: function(id, options) {
        if(!$(id)) throw("Attempted to initalize accordion with id: "+ id + " which was not found.");
        
        this.el = $(id);

        this.options = {
			padding: 0
			,position: 'top'
			,eventListner: true
			,text: ''
			,width: 0
        };
        Object.extend(this.options, options || {});
        
        this.createMarkup();
        
        if (this.options.eventListner == true) {
        	this.el.observe('mouseover', this.onMouseOver.bind(this));
        	this.el.observe('mouseout', this.onMouseOut.bind(this));
        }
        
        Event.observe(document.onresize ? document : window, "resize", this.updatePosition.bind(this));
    }
	,createMarkup: function() {
		var xTemplate = '';
    	xTemplate += '<div class="x-tip-tl"><div class="x-tip-tr"><div class="x-tip-tc"></div></div></div>';
    	xTemplate += '<div class="x-tip-bwrap">';
    	xTemplate += '	<div class="x-tip-ml">';
    	xTemplate += '		<div class="x-tip-mr">';
    	xTemplate += '			<div class="x-tip-mc">';
    	xTemplate += '				<div class="x-tip-body">content</div>';
    	xTemplate += '			</div>';
    	xTemplate += '		</div>';
    	xTemplate += '	</div>';
    	xTemplate += '	<div class="x-tip-bl x-panel-nofooter"><div class="x-tip-br"><div class="x-tip-bc"></div></div></div>';
    	xTemplate += '</div>';
    	
        this.tt = new Element('div', {
            'class': 'x-tip'
        }).setStyle({
            position: 'absolute',
            zIndex: '4000'
        });
        this.tt.update(xTemplate);

        var anchorStyles = {
            position: 'absolute',
            zIndex: '4001',
            left: '10px'
        };
        var anchorPos = this.options.position == 'bottom' ? 'top' : 'bottom';
        anchorStyles[anchorPos] = '-8px';
        
        this.anchor = new Element('div', {
            'class': 'x-tip-anchor  x-tip-anchor-'+anchorPos
        }).setStyle(anchorStyles);
        this.anchor.hide();
        this.tt.appendChild(this.anchor);
        document.body.appendChild(this.tt);
        
        this.bodyText = this.tt.select('div.x-tip-body')[0];
        if (this.options.text.length > 0)
        	this.bodyText.update(this.options.text);
        else
        	this.bodyText.update(this.el.getAttribute('tt'));
		this.bodyText.setStyle({'position': 'absolute'});
		
		
		//render tooltip for getting dimensions
		this.onMouseOver();
		
		var width = this.options.width > 0 ? this.options.width : this.bodyText.getWidth();
		this.tt.setStyle({'width': (width+12)+'px'});
        this.bodyText.setStyle({
        	'width':width+'px', 
        	'height':'auto', 
        	'position': 'static'
        });
        
        this.tt.setStyle({display: 'none', visibility:'hidden'});
		this.anchor.setStyle({display: 'none', visibility:'hidden'});
        
        this.updatePosition();
        
        if (Prototype.Browser.IE) $(document.body).addClassName('ext-ie');
	}
	,updatePosition: function() {
		if (this.options.position == 'top') {
        	this.tt.setStyle({
				'left': this.el.cumulativeOffset().left+'px',
				'top': (this.el.cumulativeOffset().top-this.tt.getHeight()-this.options.padding-10)+'px'
			});
        }
        else {
        	this.tt.setStyle({
				'left': this.el.cumulativeOffset().left+'px',
				'top': (this.el.cumulativeOffset().top+this.el.getHeight()+this.options.padding+10)+'px'
			});
        }
	}
	,onMouseOver: function(e) {
		this.tt.setStyle({display: 'block', visibility:'visible'});
		this.anchor.setStyle({display: 'block', visibility:'visible'});
	}

	,onMouseOut: function(e) {
		this.tt.setStyle({display: 'none', visibility:'hidden'});
		this.anchor.setStyle({display: 'none', visibility:'hidden'});
	}
	,fade: function() {
		new Effect.Parallel([
		    new Effect.Opacity(this.tt, { sync: true, from: 1, to: 0}),
		    new Effect.Opacity(this.anchor, { sync: true, from: 1, to: 0})
		], { 
			duration: 1.5
		});
	}
});

DROW.listFade = Class.create({
	
    initialize: function(id, options) {
        if(!$(id)) return false;
        
        this.animating = false;
        this.activeEl = null;
        this.el = $(id);
        
        this.options = {
			marginLeft: -5
			,marginTop: -10
        };
        Object.extend(this.options, options || {});

        this.childs = this.el.select('a');
        
        for(var i=0;i<this.childs.length;i++) {
        	this.childs[i].observe('mouseover', this.onMouseOver.bind(this, this.childs[i], i));
        	this.childs[i].observe('mouseout', this.onMouseOut.bind(this, this.childs[i], i));
        }
        
        this.el.observe('mouseover', this.elOver.bind(this, this.childs[i], i));
    	this.el.observe('mouseout', this.elOut.bind(this, this.childs[i], i));
    }

	,onMouseOver: function(el, index) {
		var scope = this;
		this.fade.delay(0.01, el, index, scope);
	}

	,onMouseOut: function(el, index) {
		var scope = this;
		this.appear.delay(0.01, el, index, scope);
	}
	,fade: function(item, index, scope) {
		for (var i=0;i<scope.childs.length;i++) {
			if (i != index) scope.childs[i].setOpacity(0.5);
			else scope.childs[i].setOpacity(1);
		}
		return true;
	}
	,appear: function(item, index, scope) {
		if (scope.hover == false) {
			for (var i=0;i<scope.childs.length;i++) {
				scope.childs[i].setOpacity(1);
			}
			return true;
		}
	}
	,elOver: function() {
		this.hover = true;
	}
	,elOut: function() {
		this.hover = false;
	}
});





document.observe("dom:loaded", function() {
	
	//make fake tooltip for rendering problem in IE
	var fakeEl = new Element('div').setStyle({
        display: 'none'
    });
	new DROW.tip(fakeEl);
	
	$(document.body).select('a[tt]').each(function(el){
		new DROW.tip(el);
	});
	//new DROW.listFade('products');
});