var DropDownShow = new Class({
	
	Implements: [Events, Options],
    
    options: {
    	id: 'target', 		// phần tử cần hiển thị dropdown-show.
    	style: 'dds',		// css cho thẻ chứa phần tử id. 
    	url: 'Link.ashx',	// url trả về dữ liệu html cho dropdown-show.
    	position: 'left',	// vị trí của thẻ div hiển thị [left|right].
    	loadBefore: false,	// load trước dữ liệu cho dropdown-show.
    	idLoadBefore: '',	// thẻ chứa dữ liệu trong trường hợp load trước. 
    	idContainer: ''
    },
    
    initialize: function(options){
        this.setOptions(options);               
	
		var cloneTarget = $(this.options.id).clone();               
        
        var par = new Element('span', {
        	'class': this.options.style        	
        });
        
        par.replaces($(this.options.id)).adopt(cloneTarget);
		
		var div = new Element('div', {
			'class': this.options.style + '-div'
		});                
				
		div.inject(par, 'bottom');
        
        cloneTarget.set({
        	'id': this.options.id,
        	'events': {
	    		'mouseover': function() 
	    		{	
		        	if(div.get('html') != '')
		        	{	
		        		div.setStyle('display', 'block');
		        	}
		        	else
		        	{
		        		if(!this.options.loadBefore)
						{
		        			this._load(par, div);
		        			div.setStyle('display', 'block');
						}
		        	}
		    	}.bind(this)
			}
        });
        
        var notIE=7;
        if(Browser.Engine.name == 'trident') notIE=1;
        
        div.setStyles({
			'top': cloneTarget.getSize().y-notIE
		});
			
		if(this.options.position == 'left')
		{
			div.setStyle('left', 0);
		}
		else if(this.options.position == 'right')
		{
			if(Browser.Engine.trident4)
			{				
				div.setStyle('right', $(this.options.idContainer).getSize().x - cloneTarget.getSize().x - 2); // hard code.
			}
			else
			{
				div.setStyle('right', 0);
			}
		}
		else
		{
			div.setStyle('left', 0);
		}
		
		par.addEvents({
        	'mouseleave': function(){
	    		if(div.getStyle('display') == 'block')
	    			div.setStyle('display', 'none');
	    	}.bind(this)
		});	
		
		if(this.options.loadBefore)
		{
			div.adopt($(this.options.idLoadBefore));
			$(this.options.idLoadBefore).setStyle('display', 'block');
        } 	
    },
    
    _load: function(par, div)
    {
    	/* loading */
    	var loading = new Element('div', {
			'class': 'loading'
		}).adopt(new Element('img', {
			'src': '/res/themes/base/ajax-loader.gif',
			'styles': {
				'vertical-align': 'middle'
			}		
		})).adopt(new Element('label', {
			'html': 'Đang tải...',
			'styles': {
				'margin-left': '5px'
			}	
		}));
		
		if(this.options.position == 'left')
		{
			loading.setStyle('left', 0);
		}
		else if(this.options.position == 'right')
		{
			loading.setStyle('right', 0);
		}
		else
		{
			loading.setStyle('left', 0);
		}
		var save = this.options.loadBefore;
		/* request ajax */
    	var request = new Request.HTML({
    		url: this.options.url + '&d=' + new Date(),
    		method: 'get',	
    		evalScripts: true, 
    		async: true,
    		onRequest: function(){ 
    			if(!save)
    			{	    				
					loading.inject(par, 'bottom');
				}
    		},  	
    		update: div, 
    		onComplete: function(html){
    			if(!save)
    			{	
					loading.destroy();
				}    			
    		}
    	}).send();
    }	
});