var Configurator = {
	
	step : 1,
	maxStep: 12,
	extCode: null,
	options: {
		variable		: 'widgetConfigurator',
		mode			: '1',
		prefix			: 'camnetwork_widget',
		defaultCam		: null,
		title			: '',
		titlePrefix		: '',
		limit			: '50',
		cams			: [],
		area			: null,
		rating			: true,
		links			: true,
		disclaimer		: true,
		lang			: '1',
		widthIn			: '2',
		width			: '98',
		fontColor		: '000',
		linkColor		: '000',
		borderColor		: '1a1a33',
		elementColor	: 'eaeaff',
		hasBorders		: false,
		hasElementColors: 'true'
	},
	
	geoarea_accourany: -1,
	
	step2Links: [],
	step3LimitChanged: false,
	
	step4value: '',
	step4error: false,
	step4edited: false,
	
	
	step11agbChanged: false,
	step11error: false,
	step11codeReuqested: false,
	
	typedTimeout: null,	
	typingCallbackDelay: function (callback, param, delay) {
		var getCallback = function (callback, param, that) {
			return function () {
				callback(param, that);
			};
		};
		
		
		if (this.typedTimeout !== null) {
			window.clearTimeout(this.typedTimeout);
		}
		this.typedTimeout = window.setTimeout(getCallback(callback, param, this), delay);
	},
	
	getSend: function () {
		var param, args, i;
		args = [];
		for (param in this.options) {
			if (typeof (this.options[param]) === 'object' && (this.options[param] instanceof Array)) {
				for (i = 0; i < this.options[param].length; i++) {
					args.push(param + "[]=" + encodeURIComponent (this.options[param][i]));									
				}
			}else {
				args.push((param === 'variable'?'var':param) + "=" + encodeURIComponent(this.options[param]));				
			}
		}
		return args.join('&');
	},
	
	hiddenButtons: {},
	
	show: function (stepId,that,el)
	{
		var varName = "s_" + stepId;
		//el.parentNode.removeChild(el);
		el.style.display = "none";
		that.hiddenButtons[varName] = el;
		
		if (that.step < stepId)
		{
			that.step = stepId;
			
			that.updateView (that);
		}
	},
	
	//step 1 done
	modeSelected: function (selection)
	{
		var emtpySel = $('hptoolEmptyOption');
		if (emtpySel!=null) {
			emtpySel.parentNode.removeChild(emtpySel);
		}
		this.step = 2;
		this.options.mode = selection.value;
		this.updateView(this);
		
		if( 
				this.options.mode == 4 ||  
				this.options.mode == 3 
		) {
			this.step2Links = [];
		}
		if (!this.step4edited) {			
			this.options.defaultCam = null;
		}
	},
	//setp 2 done
	geoAreaOrCamsSelected: function (params,that) {
		var id,feedback,linkObject;
		var selection = params[0];
		var linkId = params[1];
		var value = selection.value;
		var error = false;
		if (that.options.mode == 4) {
			id = Camnetwork.getGeoIdByLink( value );
			error = (id===false);
			if (!error) {
				that.options.area = id;
			}else {
				//no update to step 3
				error = true;
				delete( that.options.area );
			}
		}else{
			id = Camnetwork.getCamIdByLink( value );
			error = (id===false);
			if(!error){
				if( that.options.cams.length > linkId){
					that.options.cams[linkId] = id;
				}else{
					that.options.cams.push(id);
				}
			}else{
				if( that.options.cams.length > linkId ){
					//remove old id from list
					delete(that.options.cams[linkId]);
				}
			}
		}
		
		if (error) { 
			//error occured, do not go to step 3
			if( that.options.mode == 4 ){
				feedback = that.getGeoAreaErrorMesage();
			}else{
				feedback = that.getWebcamErrorMesage();
			}
		}else{
			//no error occured, go to step 3
			if( that.step==2 ){ that.step = 3; } 
			if( that.options.mode == 4 ){
				feedback = that.getGeoAreaSuccessMesage(id,that);
			}else{
				feedback = that.getWebcamSuccessMesage(id,that);
			}
		}
		
		linkObject = { url: value, feedback: feedback, error: error };
		if (that.step2Links.length > linkId) {		
			that.step2Links[linkId] = linkObject;
		}else{
			that.step2Links.push( linkObject );
		}
		
		if (!that.step4edited) {			
			that.options.defaultCam = null;
		}

		that.updateView(that);
	}, 
	//step 3 done
	limitSelected: function (selection) {
		var emtpySel = $('hptoolEmptyOption');
		if (!this.step3LimitChanged && emtpySel!=null) {
			emtpySel.parentNode.removeChild(emtpySel);
		}
		this.step3LimitChanged = true;
		
		if (this.step==3) {
			if (this.step4error) { this.step = 4; }
			else{ this.step = 5; }			
		}
		
		this.options.limit = selection.value;
		if (!this.step4edited) {			
			this.options.defaultCam = null;
		}
		this.updateView(this);
	},
	
	//step 4 done
	defaultSelected: function (selection, that) {
		var value = selection.value;
		var id = Camnetwork.getCamIdByLink(value);
			
		that.step4error = (id === false);
		if (!that.step4error) {
			that.options.defaultCam = id;
			this.step = 5;
		}
		that.step4value  = value;
		that.step4edited = true;
		that.updateView(that);
	},
	
	//step 5 done
	showRatingSelected: function (selected) {
		this.options.rating = selected.checked?1:0;
		this.updateView(this);
	},
	
	//step 6 done
	showGeolinksSelected: function (selected) {
		this.options.links = selected.checked?1:0;
		this.updateView(this);
	},
	
	//step 7 done
	showDisclaimerSelected: function (selected) {
		this.options.disclaimer = selected.checked?1:0;
		this.updateView(this);
	},
	
	//step 6 (8) done
	showTitle:	function (bool) {

		var element;
		element = $('hptool_static_title');
		var element2;
		element2 = $('hptool_title_prefix');
		if (bool) {
			if (element)
			{
				element.disabled = false;
			}
			if (element2)
			{
				element2.disabled = true;
			}
			
		}else {
			if (element) {
				element.disabled = true;
			}			
			if (element2) {
				element2.disabled = false;
			}
			if (this.step == 6) { 
				this.step = 7;
				this.updateView (this);
			}			
		}
	},
	titleSelected: function (selection,that) {
		var value = '';
		if(typeof selection == 'string'){
			value = selection;
		}else if(typeof that == 'object'){
			value = selection.value;
		}
		that.options.title = value;
		if (that.step == 6) {
			that.step = 7;
		}
		that.updateView (that);
	},
	titlePrefixSelected: function (selection,that) {
		var value = '';
		if(typeof selection == 'string'){
			value = selection;
		}else if(typeof that == 'object'){
			value = selection.value;
		}
		that.options.titlePrefix = value;
		that.updateView (that);
	},

	//step 7 done
	languageSelected: function (selection) {
		var value = selection.value;
		this.options.lang = value;
		if(this.step == 7){
			this.step = 8;
		}
		this.updateView (this);
	},

	//step 8 done
	widthIn: function (selection) {
		var value = selection.value;
		this.options.widthIn = value;
		this.updateView(this);
	},
	widthSelected: function (selection) {
		var value = selection.value;
		this.options.width = value;
		this.updateView (this);
	},
	
	//step 9 done
	bordersSelected: function (selected) {
		this.options.hasBorders = selected.checked?1:0;
		this.updateView (this);
	},
	elementBordersSelected: function (selected) {
		this.options.hasElementColors = selected.checked?1:0;
		this.updateView (this);
	},
	
	//step 10 done
	fontColorSelected: function (selection,that) {
		that.options.fontColor = selection.value;
		that.updateView (that);
	},
	borderColorSelected: function (selection, that) {
		that.options.borderColor = selection.value;
		that.updateView (that);
	},
	elementColorSelected: function (selection, that) {
		that.options.elementColor = selection.value;
		that.updateView(that);
	},
	linkColorSelected: function (selection, that) {
		that.options.linkColor = selection.value;
		that.updateView (that);		
	},

	
	//step 11 done
	prefixSelected: function (selection, that) {
		that.options.prefix = selection.value;
		that.updateView (that);
	},
	termsChanged: function (selection, that) {
		that.step11agbChanged = true;
		that.updateView (that);
	},
	codeRequested: function (selection, that) {
		that.step11codeReuqested = true;
		that.updateView (that);
	},
	
	
	updateView: function (that)
	{
		
		/*display hidden buttons that shell no longer be hidden*/
		var i;
		var maxSteps = 13;
		for( i = that.step+1; i < maxSteps; i++ )
		{
			varName = ("s_"+i);
			if ( that.hiddenButtons.hasOwnProperty( varName ) ) 
			{
				var el = that.hiddenButtons[varName]
				el.style.display = 'inline';
			}
		}
		
		var wrapper;
		var send = that.getSend();
		var getCallback = function (that) {
			return function () {
				var i,el,content;
				content = $('content');
				for (i=0; i <= that.step; i++) {
					that.updateStep[i] (that);
					el = $('camnetwork_widgetstep_'+i);
					if( el && content && el.offsetTop+el.offsetHeight > content.offsetHeight ){ content.style.height = '100%'; }
				}
				
				for (i=that.step+1; i<=that.maxStep; i++) {
					that.hideStep(i);
				}
			};
		};
		var update = getCallback (that);
		var request = eval ('('+RequestCache.getRequest('POST', 'http://www.camnetwork.org/singleVariables.js',send,null,false)+')');
		if (that.options.defaultCam == null) {
			that.step4value = request.defaultLink;
			that.options.defaultCam = request.defaultId;			
		}
		
		
		if( 'accourancy' in request ){
			that.geoarea_accourany = request.accourancy;
		}
		
		that.extCode = request.codeExt;
		RequestCache.setRequest('POST','http://www.camnetwork.org/singleVariables.js','var=camName&id='+request.defaultId+'&lang='+that.options.lang,request.defaultName);
		wrapper = $('crn_main_widget_wrapper');
		if (wrapper) {
			wrapper.innerHTML = request.code;
		}
		update ();
	},
	/* these functions are used to render the form elements for the selected steps 
	 * after a previous step was updated */
	updateStep : [
		//step0 - will never be needed
		function(){}, 
		//step1 - will never be needed
		function(){},
		//step2
		function (that) {
			var text, box, i;
			var items='';
			if (
				that.options.mode == 4 ||  
				that.options.mode == 3 
			) {
				box = $('camnetwork_widgetstep_2_items');
				if (that.options.mode == 4 ) {
					//display geo area selection
					text = 'Bitte kopieren Sie den Link zur gewünschten Region in das Textfeld unten. Diesen können Sie unserer <a href="[url]" target="_blank" title="Webcams nach Regionen">Übersicht entnehmen</a>.'.split('[url]').join('http://www.camnetwork.org/de/webcams_nach_regionen.html');
				}else {
					text = 'Bitte kopieren Sie den Link zur ersten Webcam Ihrer Individuellen Auswahl in das Textfeld unten.';
				}
				
				if (that.step2Links.length>0){
					items += '<input id="hptool_selection" type="text" value="'+that.step2Links[0].url+'" onkeyup="Configurator.typingCallbackDelay(Configurator.geoAreaOrCamsSelected, [this, 0], 500)" />';
					items += '<br /><span>'+that.step2Links[0].feedback+'</span>';					
				}else {
					items += '<input id="hptool_selection" type="text" value="" onkeyup="Configurator.typingCallbackDelay(Configurator.geoAreaOrCamsSelected, [this, 0], 500)" />';
				}
				for(i=1;i < that.step2Links.length; i++){
					items += '<br /><input type="text" value="'+that.step2Links[i].url+'" onkeyup="Configurator.typingCallbackDelay(Configurator.geoAreaOrCamsSelected, [this, '+i+'], 500)" />';
					items += '<br /><span>'+that.step2Links[i].feedback+'</span>';					
				}
				if (
					that.options.mode == 3 &&
					that.step2Links.length>0 &&
					that.step2Links[that.step2Links.length-1].error === false 
				) {
					//render empty input
					items+='<br /><input type="text" value="" onkeyup="Configurator.typingCallbackDelay(Configurator.geoAreaOrCamsSelected, [this, '+that.step2Links.length+'], 500)" />';
				}
				
				$('camnetwork_widgetlbl_selection').innerHTML = text;
				$('camnetwork_widgetstep_2').style.display = 'block';
				box.innerHTML = items;
			}else {
				//no selection required
				that.hideStep( 2 );
				if (that.step==2) {					
					that.step = 3;
				}
			}
		},
		//step3
		function (that) {
			var text,i,values,name;
			var options='';
			if (
				that.options.mode == 1 ||
				that.options.mode == 2 ||
				( 
				  that.options.mode == 4 &&
				  ( that.geoarea_accourany == 4 || that.geoarea_accourany == 5)
				)
			) {
				//try to get limit
				switch (parseInt( that.options.mode, 10)) {
					case 1:
						text = 'Bis zu welchem Rang sollen die best bewerteten Webcams Angezeigt werden?';
						break;
					case 2:
						text = 'Bis zu welchem Rang sollen die meist besuchten Webcams Angezeigt werden?';
						break;
					case 4:
						name = RequestCache.getRequest('POST','http://www.camnetwork.org/singleVariables.js','var=geoName&id='+that.options.area+'&lang=1',null,false);
						text = 'In welchem Umkreis um den Mittelpunkt von [regionname] sollen Webcams angezeigt werden?'.split('[regionname]').join(name);
						break;
				}

				if (!that.step3LimitChanged) {
					options+='<option id="emptySel" selected="selected" value="-1"></option>';
				}
				
				if (that.options.mode == 4) {
					for(i = 1; i<300; i++) {
						options += '<option value="'+i+'"';
						
						if(that.step3LimitChanged && that.options.limit==i) {
							options += 'selected="selected"';
						}
						
						options += '>'+i+' km</option>';
					}
					
				}else {
					values = [ 5,10,15,25,50,100,250,500,1000 ];
					for (i = 0; i < values.length; i++ ) {
						options+='<option value="'+values[i]+'"';
						if (that.step3LimitChanged && that.options.limit==values[i] ){
							options+='selected="selected"';
						} 
						options+='>'+values[i]+'</option>';
					}
				}
				
				
				$('camnetwork_widgetlbl_limit').innerHTML = text;
				$('hptool_limit').innerHTML = options;
				$('camnetwork_widgetstep_3').style.display = 'block';
			}else{
				//no step 3 needed
				that.hideStep( 3 );
				if(that.step==3){
					that.step = 4;
					if(!that.step4error){
						//display 5
						that.step = 5;
					}
				}
			}
		},
		//step4
		function(that){
			var errorBox = $('camnetwork_widgetstep_4error');
			$('camnetwork_widgetstep_4').style.display = 'block';
			$('hptool_default').value = that.step4value;
			if(errorBox){
				if(that.step4error){
					errorBox.innerHTML = that.getWebcamErrorMesage();
				}else{
					errorBox.innerHTML = that.getWebcamSuccessMesage(that.options.defaultCam,that);
				}
			}
		},
		//step5
		function(that){
			$('camnetwork_widgetstep_5').style.display = 'block';
		},
		//step6
		function(that){
			$('camnetwork_widgetstep_6').style.display = 'block';
		},
		//step7
		function(that){
			$('camnetwork_widgetstep_7').style.display = 'block';
		},
		//step8
		function(that){
			$('camnetwork_widgetstep_8').style.display = 'block';
		},
		//step9
		function(that){
			$('camnetwork_widgetstep_9').style.display = 'block';
		},
		//step10
		function(that){
			$('camnetwork_widgetstep_10').style.display = 'block';
		},
		//step11
		function(that){
			$('camnetwork_widgetstep_11').style.display = 'block';
			var errorBox = $('step_11error');
			
			var checkbox = document.getElementById( 'camnetwork_widgethptool_terms' );
			that.step11error = !(checkbox.checked === true);
			
			if(errorBox){
				/*it were better if the agb had it's own step*/
				if(that.step11error){
					if(that.step11agbChanged){
						errorBox.style.display='block';
					}else{
						errorBox.style.display='none';
					}
					$('camnetwork_widgetstep_12').style.display = 'none';
					that.step = 11;
				}else{
					if(that.step11agbChanged && that.step11codeRequested){
						that.step = 12;
					}
					errorBox.style.display='none';
				}
			}
			
		},
		//step12 - equals var maxSteps
		function(that){
			$('camnetwork_widgetstep_12').style.display = 'block';
			$('hptoolcode').value = that.extCode;
		}
	],
	
	hideStep : function(step){
		$('camnetwork_widgetstep_'+step).style.display = 'none';
	},
	
	getWebcamErrorMesage :function(){
		return '<div class="hptool_error">Es wurde keine Webcam erkannt, bitte &uuml;berprüfen Sie Ihre Eingabe.</div>';		
	},
	
	getGeoAreaErrorMesage: function (){
		return '<div class="hptool_error">Es wurde keine Region erkannt, bitte &uuml;berprüfen Sie Ihre Eingabe.</div>';		
	},

	getWebcamSuccessMesage :function(id, that){
		var name = RequestCache.getRequest('POST','http://www.camnetwork.org/singleVariables.js','var=camName&id='+id+'&lang=1',null,false);
		return '<div class="hptool_success">Gratulation, Webcam: [name] wurde erkannt.</div>'.split('[name]').join(name);		
	},
	
	getGeoAreaSuccessMesage: function (id, that){
		var name = RequestCache.getRequest('POST','http://www.camnetwork.org/singleVariables.js','var=geoName&id='+id+'&lang=1',null,false);
		return '<div class="hptool_success">Gratulation, Region: [name] wurde erkannt.</div>'.split('[name]').join(name);		
	}
};