Event.observe(window, 'load', init_app);
var name;

function init_app(event) {
	var rules = {
		 '#panocontainer' : function(el) {
		   insertFlash('rainer');
		 },
		 '.toggler' : function(el) {
		 	el.onchange = function() {
		 	    reloadFlash();
		 	}
		 }
	};

	new minmaxSlider('Pan',0,360,0,100,360,1);
	new minmaxSlider('Tilt',-20,20,-17,3,18,1);
	Behaviour.register(rules);
	Behaviour.apply(rules); 
};
	

function reloadFlash() {
	var pano = $('panocontainer');
	var name = pano.getAttribute('rel');
	var form = Form.serialize('myform');
	new Ajax.Request('./genXML.php', {
		onLoading:function(request) {
		},   
		onComplete:function() {
			insertFlash(name);


		},
		parameters:'name=' + name + '&' + 	form,
		evalScripts:true, 
		asynchronous:true
	  }		
   );
}

	
function insertFlash(name) {
	$('panocontainer').innerHTML = '';
	var xmlurl = './xml/'+name+'.xml';  
    var so = new SWFObject('./panoStudioViewer.swf','pano','570','250','7');
  	so.addParam('FlashVars','pano=' + xmlurl);
  	so.addVariable('allowScriptAccess','always');
  	so.addVariable('allowNetworking','all');
  	so.write('panocontainer');
}

var minmaxSlider = Class.create();
minmaxSlider.prototype = {
	// constructor
	initialize: function(name,min,max,val_min, val, val_max, step) {
		this.allowEvents = false;
		this.name = name;
		this.min = min;
		this.max = max;
		this.val_min = val_min;
		this.val_max = val_max;
		this.val = val;
		this.step = step;
		this.caption = null; // Caption for dual slider
		this.output = null; // Div to output current slider value
		this.track = null; // backlground of slider
		this.handle_min = null; // Handle for slider Min
		this.handle_max = null; // Handle for slider Max
		this.slider = null; // Instance of Control.Slider
		this.out = $(this.name + '_out');
		this.createSlider();
	},
	
	// Creates slider class;
	createSlider: function() {
	    // required, so only option elements remain!
		if (this.slider) {
			this.slider.dispose();
		}
	    var handles = [$(this.name + '_minhandle'),$(this.name + '_valhandle'),$(this.name + '_maxhandle')];
	    var values = [this.val_min, this.val, this.val_max];
		this.slider = new Control.Slider(handles, this.name + '_slider', {
	    	range:$R(this.min,this.max, false),
	    	step:this.step,
	    	restricted:true,
	    	sliderValue: values,
	    	onChange:this.onSliderChanged.bind(this),
	    	onSlide:this.onSliderSlides.bind(this)
	    });
	   this.out.value = values.join(',');
	},
	onSliderChanged: function() {
		reloadFlash();
		Effect.Appear(this.out, {
			afterFinish:this.onFadeOut.bind(this)
		});
	},
	onSliderSlides: function(value) {
		this.out.value = value.join(',');
	},
	onFadeOut : function(elem) {
		Effect.Fade(this.out,{delay:1});
	}
};