var csTimeout = null;
var myCustomSelect = new Class({
	Implements: [Options, Events],
	options: {
		container: Class.empty,
		customize: null
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.initCustomSelectBox();
	},
	
	initCustomSelectBox: function(){
		var cls = this;		
		var container = $(this.options.container);
		if(!container) { return; }
		var selectBoxes = container.getElements('select');
		//var selectBoxes = container.getElements('select.selectbox');
		var arrDiv = new Array(selectBoxes.length);
		var closed = true;
		
		if(!container && $type(selectBoxes)!='Array')
			return; 	
		
		//create iframe to fix firefox
		var iframe = cls.createIframe();
		
		selectBoxes.each(function(sel,index){
			//get text box coordinate
			var input, input2, topSel, leftSel;
			if(sel.getPrevious()){
				
				if(sel.getPrevious().getPrevious()){
					input = sel.getPrevious().getPrevious().getElements('input[type=text]')[0];
					if(input) {
						input2 = sel.getNext();
						topSel = input.getCoordinates().top;
						leftSel = input.getCoordinates().left;
						widthSel = input.getCoordinates().width;
						input.setProperty('readonly', 'readonly');					
					}
				}
			}
			//create list item
			arrDiv[index] = cls.createListItem(sel, index, iframe);
			
			//add item event			
			arrDiv[index].getElements('ul li').each(function(item){
				item.addEvent('click', function(evt){                    
					evt.stop(); 
                    if(input.id == 'stream'){
                        $('frmStream').action = this.getElement('input').value;
                        $('linkStream').href = this.getElement('input').value + '?all';						
						var linkStreamVal = this.getElement('input').value + '?all';						
						new Request.HTML({
							url: '/categories',
							method: 'post',							
							data:{'url': this.getElement('input').value},							
							evalScripts: true, /* this is the default */
							onComplete: function(rs, rs2, rs3){																
								$('frmStream').set('html', rs3);
								$('sltStreamSelect').getNext().destroy();
								$('sltStreamSelect').destroy();
								new myCustomSelect({
									container: $$('body')[0]
								});		
								$$('.subMenu').each(function(menu){
									var _closeSM = menu.getElement('a.closeSubMenu');
									if(_closeSM) _closeSM.addEvent('click', function(e){
										e.stop();				
										menu.setStyle("left", -1000);
									});		
								});
								$('linkStream').href = linkStreamVal;
							}
						}).send();						
						
                    }
                    if(input.id == 'iputType01' || input.id == 'iputType02' || input.id == 'iputType03' || input.id == 'iputType04' || input.id == 'iputType05' || input.id == 'iputType06'){
                        input.getParent().getParent().getNext().getFirst().href = this.getElement('input').value; 
                    }
                    
                    
					//set text for input
					input.set('value',this.get('text'));					
					
                    if(input2){
					    input2.set('value',this.getElement('input').value);						
						if(input.id == 'stream'){
							if(input2 && input2.value != ''){								
								$('frmStream').getElements('li.hide').setStyle('display', 'block');
								$('frmStream').getElements('p.hide').setStyle('display', 'block');								
							}
							else{
								$('frmStream').getElements('li.hide').setStyle('display', 'none');
								$('frmStream').getElements('p.hide').setStyle('display', 'none');
							}
						}
					}
					
					if(input.id == 'filtrerPar'){
						$('frmParam').getElement('input[name=sortType]').value = this.getElement('input').value;
						loadAjaxContent($('frmParam').action, $('frmParam'), $('itemResultContainer'));
					}
					//close select box					
					cls.closeAllSelectBox(arrDiv);	
					if(input.id == 'Chapitre01'){
						new Request.HTML({
							url: '/ajaxoption',
							method: 'post',
							data:{'category_id': this.getElement('input').value},
							update: 'sltExercices', 
							evalScripts: true, /* this is the default */
							onComplete: function(rs, rs2, rs3){								
								var res = rs2;
								var _ul = '<ul class="selected" style="padding: 0 0 0 0; ">';								
								res.each(function(_res){
									_ul += '<li><a href="#">' + _res.innerHTML + '</a><input type="hidden" value="' + _res.value + '"></li>';
								});
								_ul += '</ul>';									
								$('sltExercicesSelect').innerHTML = _ul;
								var _li = $('sltExercicesSelect').getElements('ul li');
								$('exercices01').value = _li[0].get('text');								
								_li.each(function(item,j){
									item.addEvent('click',function(){																																				
										$('exercices01').value = this.get('text');										
										//close select box				
										arrDiv[(index+1)].ieFixLayerHide(); 	
										arrDiv[(index+1)].setStyle('display','none'); 
										arrDiv[(index+1)].getNext().setStyle('display','none'); 
									});					
								});							
							}
						}).send();
					}					
					//if(input.name == 'iputChapter'){
					//	loadAjaxContent(input.getParent('form').action, input.getParent('form'), $('itemResultContainer'));
					//}				
				});
			});
			
			//set default value or first value
			cls.setDefaultValueForSelect(sel, arrDiv[index]);
			
			//add event for btnSelectBox
			if(input){		
				input.getParent().getNext().removeEvent('mouseleave').addEvent('mouseleave', function(e){
					e.stop();
					csTimeout = setTimeout(function(){
						if(closed){
							cls.ieFixLayerHide(arrDiv[index]); 
							arrDiv[index].setStyle('display','none');
							arrDiv[index].getNext().setStyle('display','none');
							if($('iframeSel')) {
								$('iframeSel').setStyle('display' , 'none');
							}
							mustHide = false;
						}
					},800);
				});					
				var longScroll = null;
				if(sel.hasClass('txtLong')) {
					longScroll = 66;

				}
				input.getParent().getNext().removeEvent('click').addEvent('click', function(e){
					e.stop();
					
					//close all select box
					cls.closeAllSelectBox(arrDiv);			
					
					//get top, left select 				
					input = sel.getPrevious().getPrevious().getElements('input[type=text]')[0];							
					topSel = input.getCoordinates().top;
					leftSel = input.getCoordinates().left - 5;
					//set iframe again
					$('iframeSel').setStyles({
						'display': 'block',
						'position': 'absolute',
						'top': topSel + 17 + 'px', 
						'left': leftSel,
						'height': '80px'						
					});
					//set position				
					arrDiv[index].setStyles({
						'position': 'absolute',
						'top': topSel + 17 + 'px', 
						'left': leftSel
					});
					//set width scrollbar
					arrDiv[index].getNext().setStyles({
						'position': 'absolute',
						'top': topSel + 18 + 'px', 
						'left': leftSel + 113 + longScroll + 'px'
					});
					arrDiv[index].getNext().getElements('p').setStyle('width','13px');
					arrDiv[index].getNext().getElements('p').setStyle('margin','0');
					
					//display current selectbox
					arrDiv[index].setStyle('display','');
					arrDiv[index].getNext().setStyle('display','');
					
					//set auto close select
					//set mouseleave event
					
					arrDiv[index].addEvents({
						'mouseenter': function(){
							closed = false;
							mustHide = true;
							$clear(csTimeout);
						},
						'mouseleave': function(){
							closed = true;							
							csTimeout = setTimeout(function(){
								if(closed){
									cls.ieFixLayerHide(arrDiv[index]); 
									arrDiv[index].setStyle('display','none');
									arrDiv[index].getNext().setStyle('display','none');
									if($('iframeSel')) {
										$('iframeSel').setStyle('display' , 'none');
									}
									mustHide = false;
								}
							},800);
						}
					});
					
					// call customize function
					//cls.options.customize(input, arrDiv[index]);
				});
			}
		});
		
		//add scroll	
		if($$(".selScrollContent").length > 0){
			new mooScroller($$(".selScrollContent"), {});
		}
		//close all select box
		cls.closeAllSelectBox(arrDiv);		
	},
	
	createIframe: function(){		
		if(!$('iframeSel')){
			return iframe = new Element('iframe',{
				'id': 'iframeSel',
				'styles':{
					'display': 'none',
					'position': 'absolute',
					'width':'150px',		
					'height':'150px',		
					'z-index':'988',
					'visibility':'visible',
					'opacity':0
				}
			}).inject(document.body);			
		}else{
			return $('iframeSel');
		}
	},
	
	createListItem: function(select, pos, iFrame){
		//create list item	
		var cls = 'selected';
		if(select.hasClass('txtLong')){
			cls = 'selected long';
		}		
		var ul = '<ul class="'+cls+'" style="padding: 0 0 0 0; ">';
		//var ul = '<ul class="selected" style="padding: 0 0 0 0; width:' + widthSel + 'px' + '">';
		for(var i = 0; i < select.options.length; i++){
			ul += '<li><a href="#" title="'+ select.options[i].text +'" >' + select.options[i].text + '</a><input type="hidden" value="' + select.options[i].value + '"></li>';
		}		
		ul += '</ul>';		
		var  div = new Element('div',{
			'id': (select.id)? select.id + 'Select':'selScrollContent' + pos,
			'class': 'selScrollContent',
			'html': ul,
			'styles': {								
				'border': '1px solid #afafaf',
				'height':'80px'
			}
		}).inject(iFrame,'after');
		if(select.options.length < 5){
			div.setStyle('height', 'auto');
		}
		return div;
	},
	
	closeAllSelectBox: function(selBoxes){
		var cls = this;
		selBoxes.each(function(sel){
			cls.ieFixLayerHide(sel); 
			sel.setStyle('display','none');
			sel.getNext().setStyle('display','none');	
		});
	},
	
	setDefaultValueForSelect: function(sel, div){
		//add default value for selectbox to select first item
		var selectedValue;
		sel.getElements('option').each(function(op, pos){			
			if(pos == 0){
				selectedValue = op.value;
			}
			if(op.selected){
				selectedValue = op.value;
			}
		});	
		//load selected Value of select first
		div.getElements('ul li').each(function(item){
			if(item.getElement('input').value == selectedValue){
				if(sel.getParent().getElement('input[type=text]')){
					sel.getParent().getElement('input[type=text]').value = item.getElement('a').get('html');
				}
			}
		});
	},
	
	ieFixLayerShow: function(el){
		if (!Browser.Engine.trident4) {
			return;
		}
		var dim = el.getCoordinates();
		if (!el.iframeFx) {
			el.iframeFx = new IFrame({
				"id": el.id+"iframeFx",
				"src": "javascript:false;",
				"frameBorder": 0,
				"scrolling": "no",
				"styles": {
					"border": "0 none",
					"margin": 0,
					"padding": 0,
					"z-index": 998,
					"display": "none",
					"position": "absolute",
					"filter": "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"
				}
			}).inject(el, "before");
		}
		//
		el.iframeFx.set("styles", {
			"visibility": "visible",
			"display": "block",
			"top": dim.top,
			"left": dim.left,
			"width": dim.width,
			"height": dim.height,
			"z-index": 998
		});
	},
	
	ieFixLayerHide: function(el){
		if (!Browser.Engine.trident4) {
			return;
		}
		if (el.iframeFx) {
			el.iframeFx.set("styles", {
				"visibility": "hidden",
				"display": "none"
			});
		}
	}
});

window.addEvent('domready', function(){
	new myCustomSelect({
		container: 'container'
	});
	new myCustomSelect({
		container: 'header'
	});
});