var Editor = new Class({
	initialize: function(flow, viewer, elements)
	{
		this.flow = flow;
		this.viewer = viewer;
		this.stepLibrary = $(elements.stepLibrary);
		this.flowSteps = $(elements.flowSteps);
		this.flowXML = $(elements.flowXML);
		
		this.renderStepLibrary();
		this.flowStepsSortable = null;
		this.onFlowChanged();
	},
	
	renderStepLibrary: function()
	{
		this.stepLibrary.empty();
		
		for(var i=0;i<Step.all.length;i++)
		{
			var step = Step.all[i];
			
			var item = new Element("LI");
			
			var link = new Element("A", {
				href: "javascript:void(0)",
				html: step.name,
				events: {
					click: function(step){this.addStep(step)}.bind(this, step)
				}
			});
			
			item.adopt(link);
			
			this.stepLibrary.adopt(item);
		}
	},
	
	addStep: function(step)
	{
		this.flow.addStep(step);
		this.onFlowChanged();
	},

	removeStep: function(step)
	{
		this.flow.removeStep(step);
		this.onFlowChanged();
	},
	
	onFlowChanged: function(skipRenderFlowStepList)
	{
	  if ( !skipRenderFlowStepList )
		  this.renderFlowStepList();
		var flowXML = this.flow.toXML();
		this.flowXML.value = flowXML;
		this.viewer.renderXML(flowXML);
		
		this.setOrientationNavigation();
	},
	
	setOrientationNavigation: function()
	{
		var possible = {'horizontal':'orient_h', 'vertical':'orient_v', 'loop':'orient_l'};
		for(var i in possible)
		{
			if(i == this.flow.layout)
				$(possible[i]).className = 'current';
			else
				$(possible[i]).className = '';
		}
	},
	
	setFlowLayout: function(layout)
	{
		if ( layout != this.flow.layout )
		{
			this.flow.layout = layout;
			this.onFlowChanged();
		}
	},
	
	imageChanged: function(url, index)
	{
		if ( !index )
			index = 0;
		this.flow.steps[index].image_url = url;
		this.flow.steps[index].custom_image = 1;
		
		this.onFlowChanged();
	},
	
	renderFlowStepList: function()
	{
		this.flowSteps.empty();
		
		for(var i=0;i<this.flow.steps.length;i++)
		{
			var step = this.flow.steps[i];
			
			var item = new Element("DIV", {
				id:"step_"+step.index, 'class':'step',
				events: {
					mouseenter: function(e) {this.addClass("hover")},
					mouseleave: function(e) {this.removeClass("hover")}
				}
			});
			
			var inner = new Element("DIV", {'class': 'inner'});
			
			step.step_index = i;
			
			var h4 = new Element("H4", {
				html: '<span class="n">'+(i+1)+'.</span> <span class="name" id="step_name_'+step.step_index+'">'+step.name+'</span',
				events: {
					click: function(e){this.parentNode.parentNode.toggleClass("clicked")}
				}
			});
			
			inner.adopt(h4);
			
			var removeLink = new Element("A", {
				'class': 'remove', 
				href: 'javascript:void(0)', 
				text:'Remove', 
				events: {
					click: function(step){if ( confirm("Are you sure you want to remove this step?")){this.removeStep(step)}}.bind(this, step)
				}
			});
			inner.adopt(removeLink);
			
			inner.adopt(new Element('SPAN', {'class':'handle'}));

			var fieldSet = new Element('FIELDSET', {html: '<p><label>Step Title</label> </p>'});
			
			var input = new Element('INPUT', {
				type:'text',
				value:step.name
			});
			
			input.addEvent('blur', function(step, input){
			  step.name = input.value; 
			  this.onFlowChanged(true);
			  $('step_name_'+step.index).innerHTML = step.name;
			}.bind(this, [step, input]));
			
			input.addEvent('keypress', disableEnterKey);
			
			fieldSet.firstChild.appendChild(input);
			
			var uploadPara = new Element('P', {'class': 'upload', html: '<label>Upload Image</label>'});
			
			var iframe = new IFrame({
				styles: {width: 180, height: 40},
				src: "/images.php/upload?step_id="+step.id+"&src="+encodeURIComponent(step.image_url)+"&callback="+encodeURIComponent("Editor.main.imageChanged")+"&callback_param="+encodeURIComponent(step.index)+"&delete_image="+(parseInt(step.custom_image) ? 1 : 0)
			});
			
			uploadPara.adopt(iframe);
			
			fieldSet.adopt(uploadPara);
			
			inner.adopt(fieldSet);
			
			item.adopt(inner);
			
			this.flowSteps.adopt(item);
		}
		
		if ( this.flowStepsSortable )
			this.flowStepsSortable.detach();
			
		this.flowStepsSortable = new Sortables('flowSteps', {
			opacity: 0.5,
			handle: ".handle",
			onComplete: function()
			{
				this.updateFlowOrder();
			}.bind(this)
		});


		// var stepOrder = new Sortables(".flow_steps", {
		// 	clone: true,
		// 	opacity: .5,
		// 	handle: '.handle'
		// });

	},		
	
	updateFlowOrder: function()
	{
		var newOrder = new Array();
		var ids = this.flowStepsSortable.serialize();
		for ( var i=0; i<ids.length; i++ ) 
		{
			newOrder.push(parseInt(ids[i].split("_")[1]))
		}
		this.flow.setOrder(newOrder);
		this.onFlowChanged();
	}
});