/*
	Class:    	cvLinkSelect
	Author:   	Crispijn Verkade
	Website:    http://crispijnverkade.nl
	Version:  	1.4
	Date:     	30/03/2010
	Built For:  MooTools 1.2.0
*/

var cvLinkSelect = new Class({
	Implements: [Options,Events],

	options: {
        select_class: '.linked', //the class for the linked select boxes
		url: $empty, //the url for the AJAX request
		multiple_var: true, //use multiple get variables or only one
		disable: false, //disable select elements if the parent value is not set
		loadClass: 'loading', //the css class that is added when a request is made
		hasnoSub: $empty, //if the changed select box has no sub this function is fired
		hasSub: $empty, //if the changed select box has a sub this function is fired
		isLast: $empty //if the changed select box is the last linked one this function is fired
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.select = $$(this.options.select_class); //all the elements with the class 'select_class'
		this.current = null; //the element that has been changed
		var self = this;
		
		//if the page is reloaded set the value of the first select box to the empty one
		//this.select[0].value = '';
		
		this.select.each(function(el){ //add an onchange event to each 
			el.addEvent('change',function(){
				self.current = self.getDepending(el);
				
				if(el.value != ''){ //if the value is not empty get
					self.getStatus(el);
				}else{
					self.removeOptions();
				}
			});
			
			//disable the select elements
			if(self.options.disable == true){
				if(self.select.indexOf(el) >= 1){
					el.disabled = true;
				}
			}
		});
	},
	
	getDepending: function(el){
		return this.select[this.select.indexOf(el) + 1];
	},
	
	getStatus: function(el){
		var self = this;
		
		if(el == this.select.getLast()){
			this.options.isLast();
		}else{
			this.options.hasSub();
				
			this.getJson(el);
		}
	},
	
	getUrl: function(el){
		//set this to true for brands and false for size
		 if(this.options.multiple_var){
			var url = '';
			url = '?' + $('categories').get('id') +'=' + $('categories').get('value'); 
			url += '&' + $('gender').get('id') +'=' + $('gender').get('value');
			return  url;		
			
			
			return url;
		}else
		{
			var url = '';
			url = '?' + $('categories').get('id') +'=' + $('categories').get('value'); 
			url += '&' + $('brands').get('id') +'=' + $('brands').get('value');
			url += '&' + $('gender').get('id') +'=' + $('gender').get('value');
			return  url;			
		}
	},
		
	getJson: function(el){
		var self = this;
		
		this.removeOptions();
		
		var req = new Request.JSON({  
			method: 'get',  
			url: self.options.url + self.getUrl(el),
			onRequest: function(){
				self.current.addClass(self.options.loadClass);
			},
			onComplete: function(json){
				self.current.removeClass(self.options.loadClass);
				
				if(json == null){
					self.options.hasnoSub();
				}else{
					self.addOptions(el,json);
					
					//enable the updated element
					if(self.options.disable == true){
						self.getDepending(el).disabled = false;
					}
				}
			}
		}).send();
	},
	
	addOptions: function(el,json){				
		var fragment = document.createDocumentFragment();
		
		json.each(function(o){// add for each json record a new option element into the following select element
			var option = new Element('option',{'value': o.value, 'html': o.html});
			fragment.appendChild(option);
		});
		
		this.current.appendChild(fragment);
	},
	
	removeOptions: function(){
		var self = this;
		
		this.select.each(function(s){
			if(self.select.indexOf(s) >= self.select.indexOf(self.current)){ //if the select depends on the parent
				
				s.getElements('option').each(function(o){ //if the value of the option is not empty
					var value = o.getProperty('value');
					if(value != '' || value != 0){
						o.dispose(); //remove the option element
					}
				});
				
				if(self.options.disable == true){
					s.disabled = true;
				}
			}
		});
	}
});