var Demo = new Class.create({
	element:	undefined,
	parms:		undefined,
	onload:		undefined,
	img:		undefined,
	info:		undefined,
	
	initialize: function(e) {
		this.element = $(e);
		this.parms = new Hash();

		this.img = document.createElement('img');
		this.element.firstDescendant().remove();
		this.element.appendChild(this.img);
	},
	
	
	makeURL: function() {
		var chain = new com.liquidpixels.liquifire.Chain(server, uri);
		
		chain.addCommand(new com.liquidpixels.liquifire.Command('blank', {
			width: 200,
			height: 100
		}));

		chain.addCommand(new com.liquidpixels.liquifire.Command('sink', {quality: 70}));

		return chain.asURL();
	},
	
	
	update: function(parms) {
		if(parms) {
			this.parms = $H(parms);
		}
		
		if(this.onupdate)
			this.onupdate();
			
		if(this.onload)
			this.img.onload = this.onload;
			
		this.img.src = this.makeURL();
		
		if(this.info)
			this.info.innerHTML = this.makeInfo();
	}
});

// --------------------------------------------------------------------------

var ControlGroup = Class.create({
	element:	undefined,
	header:		undefined,
	content:	undefined,
	controls:	new Array(),
	
	
	initialize: function(name) {
		this.element = new Element('div');
		this.element.addClassName('MGroup');
		
		this.header = new Element('div');
		this.header.addClassName('header');
		this.header.update(name);

		this.content = new Element('div');
		this.header.addClassName('controls');

		this.element.appendChild(this.header);
		this.element.appendChild(this.content);
	},
	
	
	addContent: function(content) {
		this.content.appendChild(content);
	},
	
	
	addControl: function(control) {
		this.controls.push(control);
		this.content.appendChild(control.element);
	}
});

// --------------------------------------------------------------------------

var Control = Class.create({
	element:	undefined,
	paramName:	undefined,
	name:		undefined,
	nameE:		undefined,
	field:		undefined,
	type:		undefined,
	
	
	initialize: function(param, name) {
	},
	
	
	makeControl: function() {
		this.element = new Element('div');
		this.element.addClassName('control');
	}
});
//Control.implement(new Events);

// --------------------------------------------------------------------------

var ControlText = Class.create(Control, {
	type:		'text',
	
	
	initialize: function(param, name, value, options) {
		this.makeControl();

		var wrapper = new Element('div');
		wrapper.addClassName(this.type);
		if(options && options.cssClass)
			wrapper.addClassName(options.cssClass);
		
		this.paramName = param;
		this.name = name;
		if (this.name != null) {
			this.nameE = new Element('span', {'class': 'label'});
			this.nameE.update(name);
			wrapper.appendChild(this.nameE);
		}
		
		var val = value ? value : '';
		var size = (options && options.size) ? options.size : 255;
		this.field = new Element('input', {
			'class': 'field',
			'size': size,
			type: 'text',
			value: val,
			maxlength: options && options.maxlength ? options.maxlength : 255
		});
		if(options && options.width)
			this.field.setStyle({width: options.width});
		wrapper.appendChild(this.field);		
		
		var control = this;
		
		document.observe('change', function() {
			document.fire('onChange', this);
		});
		
		this.element.appendChild(wrapper);
	},
	
	
	
	getValue: function() {
		return this.field.getValue();
	}
});

// --------------------------------------------------------------------------

var ControlRadio = Class.create(Control, {
	type:		'radio',
	radios:		undefined,
	args:		undefined,
	
	initialize: function(param, name, value, options, args) {
		this.makeControl();
		this.value = value;
		this.radios = new Hash();
		this.data = options;
		this.options = args;

		var wrapper = new Element('div');
		wrapper.addClassName(this.type);
		if(options && options.fieldHeight)
			wrapper.setStyle('height', options.fieldHeight);
		
		this.paramName = param;
		this.name = name;
		if (this.name != null) {
			this.nameE = new Element('span');
			this.nameE.addClassName('label');
			this.nameE.update(name);
			wrapper.appendChild(this.nameE);
		}
		
		this.field = new Element('div');
		this.field.addClassName('field');
		
		$H(this.data).each(function(o) {
			var swatch = new Element('div');
			swatch.addClassName('radiooption');
			this.radios.set(o.key, swatch);

			swatch.appendChild(this.makeElement(o.key, o.value, this.options));
			
			this.field.appendChild(swatch);
			
			swatch.onclick = function() {
				this.setValue(o.key);
			}.bind(this);
		}.bind(this));
		
		this.radios.get(this.value).addClassName('selected');

		wrapper.appendChild(this.field);		
		
		this.element.appendChild(wrapper);
	},



	makeElement: function(key, content, options) {
		var img = new Element('img');

		var chain = new com.liquidpixels.liquifire.Chain(server, uri);
	
		chain.addCommand(new com.liquidpixels.liquifire.Command('blank', {
			width: (options && options.width) ? options.width : 30,
			height: (options && options.height) ? options.height : 20,
			color: 'white'
		}));

		chain.addCommand(new com.liquidpixels.liquifire.Command('annotate', {
			font: 'Myriad-SemiboldCondensed',
			pointsize: (options && options.pointsize) ? options.pointsize : 14,
			alignto: 'center',
			x: '(round(_.width/2))',
			y: '(round(_.height/2))',
			text: content
		}));

		chain.addCommand(new com.liquidpixels.liquifire.Command('sink', {format: 'png'}));

		img.src = chain.asURL();
		
		return img;
	},
	
	
	
	setValue: function(v) {
		this.value = v;
		
		this.radios.each(function(s) {
			s.value.removeClassName('selected');
		});

		this.radios.get(v).addClassName('selected');
		
		document.fire('onChange', this);
	},
	
	
	
	getValue: function() {
		return this.value;
	}
});


var ControlImageRadio = Class.create(ControlRadio, {
	makeElement: function(key, content, options) {
		var img = new Element('img');

		var chain = new com.liquidpixels.liquifire.Chain(server, uri);
		if(!(this.options && this.options.noSource))
			chain.addCommand(new com.liquidpixels.liquifire.Command('source', {
				url: demoArtPrefix + content.image,
				name: 'img'
			}));

		if(this.options && this.options.swatchChain)
			chain = this.options.swatchChain(chain, key, content);

		chain.addCommand(new com.liquidpixels.liquifire.Command('scale', {
			size: (this.options && this.options.size) ? this.options.size : 45,
			options: (this.options && this.options.scaleOptions) ? this.options.scaleOptions : 'crop'
		}));

		var borderSize = (this.options && this.options.borderSize) ? this.options.borderSize : 2;
		chain.addCommand(new com.liquidpixels.liquifire.Command('border', {width: borderSize, height: borderSize}));

		chain.addCommand(new com.liquidpixels.liquifire.Command('sink', {format: 'png'}));
 		chain.addCommand(new com.liquidpixels.liquifire.Command('cache', {hint: 'cachelong'}));

		img.src = chain.asURL();
		return img;
	}
});


var ControlLogoRadio = Class.create(ControlRadio, {
	initialize: function(param, name) {
		imgs = $A(["LPILogo.svg",
				   "ashleysteward.tif",
				   "autotrack.tif",
				   "crutchfield.tif",
				   "DicksSportingGoods.jpg",
				   "henk.tif",
				   "telegraaf.tif"]);


		options = {
			options: imgs.associate(imgs.map(function(e, i) {
				return 'file:LPI/demo08/logos/'+e 
			}))
		};

		this.parent(param, name, 'file:LPI/demo08/logos/'+imgs[0], options);
	},

	makeElement: function(key, e, options) {
		var img = new Element('img');

		var chain = new Chain(server, uri);
		chain.addCommand(new Command('source', {
			url: "file:LPI/demo08/logos/"+e
		}));

		chain.addCommand(new Command('scale', {
			size: 120
		}));

		chain.addCommand(new Command('border', {width: 5, height: 5}));

		chain.addCommand(new Command('sink', {format: 'png'}));

		img.src = chain.asURL();
		return img;
	}
});

// --------------------------------------------------------------------------

var ControlButton = Class.create(Control, {
	type:		'button',
	
	
	initialize: function(name, options) {
		this.makeControl();

		var wrapper = new Element('div');
		wrapper.addClassName(this.type);
		
		this.name = name;
		if (this.name != "Update Image") {
			if (this.name != null) {
				this.nameE = new Element('span');
				this.nameE.addClassName('label');
				this.nameE.appendText(name);
				wrapper.appendChild(this.nameE);
			}
		} else {
			this.img = new Element('img');
			this.img.src = "/images/demos/updateImageOut.gif";

			wrapper.appendChild(this.img);

			wrapper.observe('mouseover', function(e) {
				wrapper.addClassName('over');
				this.img.src = "/images/demos/updateImageOver.gif";
			}.bind(this));

			wrapper.observe('mouseout', function(e) {
				wrapper.removeClassName('over');
				this.img.src = "/images/demos/updateImageOut.gif";
			}.bind(this));
		}
		
		if(options.onclick)
			wrapper.onclick = options.onclick;
		
		this.element.appendChild(wrapper);
	},
	
	
	
	getValue: function() {
		return null;
	}
});

// --------------------------------------------------------------------------

var ControlSwatch = Class.create(Control, {
	type:		'swatch',
	colors:		undefined,
	swatches:	undefined,
	
	
	initialize: function(param, name, colors) {
		this.makeControl();
		this.colors = colors;
		this.value = colors[0];
		this.swatches = new Hash();

		var wrapper = new Element('div');
		wrapper.addClassName(this.type);
		
		this.paramName = param;
		this.name = name;
		if (this.name != null) {
			this.nameE = new Element('span');
			this.nameE.addClassName('label');
			this.nameE.update(name);
			wrapper.appendChild(this.nameE);
		}
		
		this.field = new Element('div');
		this.field.addClassName('field');
		
		$A(colors).each(function(o) {
			var swatch = new Element('div');
			swatch.addClassName('swatchpatch');
			this.swatches.set(o.color, swatch);

			var img = new Element('img');
			swatch.appendChild(img);

			var chain = new com.liquidpixels.liquifire.Chain(server, uri);
		
			chain.addCommand(new com.liquidpixels.liquifire.Command('blank', {
				width: 20,
				height: 20,
				color: o.color
			}));

			chain.addCommand(new com.liquidpixels.liquifire.Command('sink', {format: 'png'}));

			img.src = chain.asURL();
			
			this.field.appendChild(swatch);
			
			swatch.onclick = function() {
				this.setValue(o);
			}.bind(this);
		}.bind(this));
		
		this.swatches.get(this.value.color).addClassName('selected');

		wrapper.appendChild(this.field);		
		
		this.element.appendChild(wrapper);
	},
	
	
	
	setValue: function(c) {
		this.value = c;
		
		this.swatches.each(function(s) {
			s.value.removeClassName('selected');
		});

		this.swatches.get(c.color).addClassName('selected');
		
		document.fire('onChange', this);
	},
	
	
	
	getValue: function() {
		return this.value;
	}
});

// --------------------------------------------------------------------------

var Controls = Class.create({
	element:	undefined,
	groups:		new Array(),
	
	initialize: function(e) {
		this.element = $(e);
		
		var accE = new Element('div');
		this.element.appendChild(accE);
	},
	

	
	addGroup: function(group) {
		this.groups.push(group);
		this.element.appendChild(group.element);
	},
	
	
	
	getValues: function() {
		var v = new Hash();
		
		this.groups.each(function(group) {
			group.controls.each(function(control) {
				if(control.type != 'button') {
					v.set(control.paramName, control.getValue());
				}
			});
		});
		
		return v;
	}
	
});