/*
Script: SwitchButton.class.js
	iPhone-style switch button event handler
*/

/*
Class: iSwitch
	clickable, draggable, switchable, web2.0 button.
	the class btnSwitch is old and deprecated, please use the class iSwitch at the bottom
	
Author:
	Michael Rotmanov (rotmanov@sipgate.de)
*/
 var btnSwitch = new Class({
	options: {
		ajaxify: true,
		effects:true,
		fxDuration:500,
		transition: Fx.Transitions.Cubic.easeInOut,
		url:'/ajax/webuserrights/setrights/',
		yesPosition: -41,
		midPosition: -20,
		noPosition: 0,
		onSwitchFunction: function(element) {
			var extensionSipId = element.getParent().id.replace(/_.*/ig,'');
			var _rightsall = true;
			// check all options to be true, or set rightsall to false
			$('settings_table_' + extensionSipId).getElements('input[type=hidden]').each(function(el) {
				if(el.value == 'false') _rightsall = false;
			});
	
			// set actual permission conclusion text
			if(_rightsall) {
				$('EventTableRow_' + extensionSipId).getChildren()[2].setHTML(lang.get('JS_SETTINGS_WEBUSER_RIGHTS_ALL'));
			} else {
				$('EventTableRow_' + extensionSipId).getChildren()[2].setHTML(lang.get('JS_SETTINGS_WEBUSER_RIGHTS_NOTALL'));
			}
		}
	},
	
	initialize: function (element, options) {
		this.setOptions(options);
		this.element = element;
		this.effect = element.getElement('div').effect('margin-left', {
										duration: this.options.fxDuration,
										transition: this.options.transition
										});
		var elementId = element.id;
		element.addEvent('mousedown',  this.switchState.bindAsEventListener(this,element));
	},
	
	argFunc: function () {
		// please extend this function!!!!
		
		// it returns arguments, that are passed to the ajax request
		var arguments = $H({});
		arguments.set('extensionSipId', config.get('extensionSipId'));

		return arguments;
	},
	
	switchState: function(event) {

		this.switchOn(event.currentTarget);

		if(this.options.ajaxify) {
			var arguments = this.argFunc();
			this.ajaxRequest(arguments, this.options.onSwitchFunction.bind(this), event.currentTarget);
		} else {
			var data = {faultCode: "200" };
			this.toggleState(data, event.currentTarget);
		}
	},
	
	switchOn: function(element) {
		var state = element.getElement('input[type=hidden]');
		if(state.getValue() == "true") {
//			element.getElement('div').effect('margin-left', {duration: 500, transition: Fx.Transitions.Cubic.easeInOut}).start(-20);
			element.addClass('button_switch_wait');
			this.effect.stop();
			this.effect.start(-20);
			state.value = "false";			
		} else {
			this.effect.stop();
			this.effect.start(-20);
//			element.getElement('div').effect('margin-left', {duration: 500, transition: Fx.Transitions.Cubic.easeInOut}).start(-20);
			element.addClass('button_switch_wait');
			state.value = "true";			
		}		
	},
	
	switchOff: function(element) {
		var state = element.getElement('input[type=hidden]');
		if (state.getValue() == "false") {
			element.getElement('div').effect('margin-left', {duration: 500, transition: Fx.Transitions.Cubic.easeInOut}).start(-41);
//			this.effect.start(-41);
			element.removeClass('button_switch_wait');
		} else {
			element.getElement('div').effect('margin-left', {duration: 500, transition: Fx.Transitions.Cubic.easeInOut}).start(0);
			element.removeClass('button_switch_wait');
//			this.effect.start(0);
		}
	},
	
	toggleState: function(data, element, oncompletefunction) {
		var state = element.getElement('input[type=hidden]');
		if(data.faultCode != "200") {
			if(state.getValue() == "false") {
				state.value = "true";
			} else if(state.getValue() == "true") {
				state.value = "false";
			}
		}
		this.switchOff(element);
		
		if (typeof oncompletefunction == "function") {
				oncompletefunction(element);
		}
	},
	
	ajaxRequest: function(args, oncompletefunction, element) {
		var args = args.toQueryString();
		new Ajax(this.options.url, {
	  		method: 'post',
	  		data: args,
	  		onSuccess: function(transport) {
	    		var data = false;
	    		try {
	    			data = Json.evaluate(transport);
	    			// oncompletefunction(data, element);
	    			this.toggleState(data, element, oncompletefunction);
	    		} catch(e) {
	    			sgErrorMessage('catch(e) Error: <pre>'+e+'</pre>',5000);
	    		}
	    		if(! data) {
	    			sgErrorMessage('Damn! no data received.',5000);
	    		}
	  		}.bind(this)
		}).request(); 
	}
});
btnSwitch.implement(new Options);


var iSwitch = new Class({
	
	options: {
		create: { enabled: false,
				  container: '',
				  name: '',
				  labels: [],
				  values: [],
				  selected: ''
				 },
		ajaxify: false,
		effects:true,
		duration: 500,
		transition: Fx.Transitions.Cubic.easeInOut,
		url:'/ajax/webuserrights/setrights/',
		onAjaxStart: Class.empty,
		onAjaxComplete: function(data) { if(data.faultCode == '200') return true; else return false; },
		onAjax: Class.empty,
		onSwitch: Class.empty
	},
	
	initialize: function(radios, options) {
		this.setOptions(options);
		this.mvalue = 0;
		this.ajaxparams = {};

		if(this.options.create.enabled) {
			this.create();
			radios = this.options.create.name;
		}
		//Create Elements for iSwitch
		this.container = new Element('div', {'class':'button_switch'});
		this.scrollarea = new Element('div').inject(this.container);
		this.left_label = new Element('span').inject(this.scrollarea);
		this.right_label = new Element('span').setStyle('textAlign', 'right').inject(this.scrollarea);
		this.labels = [this.left_label, this.right_label];
		this.effect = this.scrollarea.effect('margin-left', {
										duration:  this.options.duration,
										transition: Fx.Transitions.Cubic.easeInOut
										});		
		//Hide Radioboxes and Labels
		this.radio_el = $$('input[name='+radios+']');
//		this.label_el = $$('label[for='+radios+']');

		
		this.radio_el.each(function(item,index){

			item.setStyle('display', 'none');
			$$('label[for=' + item.getProperty('id') + ']').setStyle('display', 'none');

			if(item.checked == true) this.goTo.bind(this, [index, 1])();
			
			var opttext = $$('label[for=' + item.getProperty('id') + ']')[0].getText();
			this.labels[index].setText(opttext);
		
		}.bind(this));
		
		this.disableSelection(this.container);
		this.container.inject(this.radio_el[this.radio_el.length-1], 'after');
		
		this.container.addEvent('mousedown', function() {
			if(this.options.ajaxify) {
				this.container.addClass('button_switch_wait');
				this.effect.start( -20 );
				this.fireEvent('onAjax');
				this.ajaxRequest();
			} else {
				this.goTo((this.mvalue == 0 ? 1 : 0), this.options.duration);
			}
		}.bind(this));
	},
	
	create: function() {
		var newLabelLeft = new Element('label', {'for': this.options.create.name + '_1'}).setText(this.options.create.labels[0]);
		var newRadioLeft = new Element('input', {'type': 'radio',
												'name': this.options.create.name,
												'value': this.options.create.values[0],
												'id': this.options.create.name + '_1' });
		var newLabelRight = newLabelLeft.clone(true).setProperty('for', this.options.create.name + '_2').setText(this.options.create.labels[1]);											
		var newRadioRight = newRadioLeft.clone(true).setProperties({
												'name': this.options.create.name,
												'value': this.options.create.values[1],
												'id': this.options.create.name + '_2' });
														
		if(this.options.create.selected == this.options.create.values[1])
			newRadioRight.checked = true;
		else
			newRadioLeft.checked = true;
		
		this.options.create.container.adopt(newLabelLeft);
		this.options.create.container.adopt(newRadioLeft);
		this.options.create.container.adopt(newLabelRight);
		this.options.create.container.adopt(newRadioRight);
	},
	
	goTo: function(value, duration){
		var positions = [0, -41];

		duration = duration || this.options.duration;
		
		this.effect.stop();

		if(duration == 1)
		{
			this.effect.set(positions[value]);
		} else {
			this.effect.start(positions[value]);
		}
				
		this.mvalue = value;
		this.radio_el[value].checked = true;
		this.fireEvent('onSwitch');
	},
	
	ajaxRequest: function() {
		new Ajax(this.options.url, {
	  		method: 'post',
	  		windowSpinner: false,
	  		data: this.ajaxparams,
			onStateChange:function() {
			},	  		
	  		onComplete: function(transport) {
	    		var data = false;
	    		this.container.removeClass('button_switch_wait');
	    		try {
	    			data = Json.evaluate(transport);
	    			var ret = this.options.onAjaxComplete.bind(this, [data])();
	    			
	    			if(ret) {
	    				this.goTo((this.mvalue == 0 ? 1 : 0), this.options.duration);
	    			} else {
	    				this.goTo((this.mvalue == 0 ? 0 : 1), this.options.duration);
	    			}
	    			
	    		} catch(e) {
	    			sgErrorMessage('catch(e) Error: '+e,5000);
	    		}
	    		if(! data) {
	    			sgErrorMessage('Damn! no data received.',5000);
	    		}
	  		}.bind(this)
		}).request(); 
	},
	
	disableSelection: function(element) {
	    element.onselectstart = function() {
	        return false;
	    };
	    element.unselectable = "on";
	    element.style.MozUserSelect = "none";
	}	
	
});
iSwitch.implement(new Options, new Events);