var Plate = {};

Plate.Base = new Class({
	options: {
			samples: true,
			additionalText : '',
	 		outerBorderThickness: 2,
			borderThickness : 3,
			colour: "0,0,0",
			textColour: "255,255,255",
			paper: null,
			text: "SAMPLE",
			size:'small',
			start_point:{x:0, y:80},
			textInput: 'text', 
			sizeInput: 'size', 
			colourInput: 'colour', 
			additionalTextInput: 'additional_text',
			count: { 'small': 8, 'euro': 4, 'medium':9},
			availSizeColours: {
				'small' :{
					0 	: '0,0,0',
					1 	: '255,255,255',
					2	: '188,188,188',
					3	: '250, 243, 5',
					4	: '3,133,74',
					5	: '234,47,0',
					6 	: '2,214,251',
					7	: '0,106,213',
					8	: '0,49,98',
					9	: '255,51,122',
					10	: '138,28,0'	
				},
				'euro' 	:{
					0	: '0,0,0', 
					1	: '255,255,255',
					2	: '188,188,188',
					3	: '250, 243, 5'
				},
				'medium' :{
					0 	: '0,0,0',
					1 	: '255,255,255',
					2	: '188,188,188',
					3	: '250, 243, 5',
					4	: '3,133,74',
					5	: '234,47,0',
					6 	: '2,214,251',
					7	: '0,106,213',
					8	: '0,49,98',
					9	: '255,51,122',
					10	: '138,28,0'
				}
			},
			availTextColours:{
				0	: '0,0,0', 
				1	: '255,255,255',
				2	: '188,188,188'
			},
			availSizes: {
				'small' : {'price':'30', 'y': 23, 'chars': 6.5, 'width': 140, 'height': 38, 	'fontSize':30, 'description': 'Small', 'class':'small'},
				'medium': {'price':'35', 'y': 23, 'chars': 10, 'width': 210, 'height': 38,	'fontSize':30, 'description': 'Medium', 'class':'medium'},
				'euro' : {'price':'45', 'y': 39, 'chars': 13, 'width': 286, 'height': 56, 	'fontSize':35, 'description': 'Euro', 'class':'euro'}
			},
			badCombo: {
				'255,51,122': '188,188,188'	
			}
	},
	
	initialize: function(id, options){
		this.id = id;
		$extend(this.options, options);
		this.options.text = this._clean_text(this.options.text);
		this.options.borderColour = this.options.textColour;
		if($(this.options.textInput)) $(this.options.textInput).set('value', this.options.text);
		this.draw();
		this.formSetup();
		this.drawOptions();
		if($(this.options.textInput)) $(this.options.textInput).addEvent('keyup', this.setTextFromInput.bind(this));
		if($(this.options.additionalTextInput))	$(this.options.additionalTextInput).addEvent('keyup', this.setAdditionalTextFromInput.bind(this));
		if(this.options.samples) this.draw_samples();
		this.showSelected();
		this.countChars(this.options.text);
	},

	showSelected: function(){	
		if(this.options.colourInput && $(this.options.colourInput+"_options")){
			$(this.options.colourInput+"_options").getElements('a').each(function(el){
				el.removeClass('selected');
				if(el.id == this.options.colour)
					el.addClass('selected');
			}.bind(this));
		}
		if(this.options.textInput && $(this.options.textInput+"_options")){
			$(this.options.textInput+"_options").getElements('a').each(function(el){
				el.removeClass('selected');
				if(el.id == this.options.textColour)
					el.addClass('selected');
			}.bind(this));
		}
		if(this.options.sizeInput && $(this.options.sizeInput+"_options")){
			$(this.options.sizeInput+"_options").getElements('td.price').each(function(el){
				el.removeClass('selected');
				if(el.id == this.options.size)
					el.addClass('selected');
			}.bind(this));
			$(this.options.sizeInput+"_options").getElements('input[name=size]').each(function(el){
				el.set('checked', false);
				if(el.value == this.options.size){
					el.set('checked', true);
				}
			}.bind(this));
		}
		this.draw_additional(this.options.additionalText);
	},
	
	gC: function(c){
		return 'rgb('+c+')';
	},

	gCt: function(c){
		return 'rgb('+c+')';
	},

	formSetup: function(){
		if($('plate_text')){
			this.post = {};
			this.post.text 			= $('plate_text');
			this.post.size 			= $('plate_size');
			this.post.text_colour 	= $('plate_text_colour');
			this.post.plate_colour 	= $('plate_colour');
			this.post.additional_text = $('plate_additional_text');
			//init setup
			this.post.text.set('value',	this._clean_text(this.options.text));
			this.post.size.set('value',	this.options.size);
			this.post.plate_colour.set('value', this.options.colour);
			this.post.text_colour.set('value', this.options.textColour);
			this.post.additional_text.set('value', this.options.additional_text);
		}
	},
	
	setSize: function(size){
		this.options.size = size;
		if(this.options.textInput){
			$(this.options.textInput).set('value', $(this.options.textInput).get('value').substring(0,this.options.availSizes[size].chars));
			if($(this.options.textInput).get('value')) 
				this.options.text = $(this.options.textInput).get('value');
		}
		this.options.start_point.y = this.options.availSizes[size].y;
		this.post.size.set('value', size);
		this.drawColours();
		this.draw();
		this.draw_sample_size();
		this.showSelected();
		$('addtional').setStyle('display', 'none');
		this.remove_additional();
		if(this.options.size == 'euro') {
			$('addtional').setStyle('display', '');
			this.draw_additional($(this.options.additionalTextInput).value);
		} 
		this.countChars(this.options.text);
	},
	
	setTextFromInput: function(el){
		this.setText(el.target.value);
	},
	
	setAdditionalTextFromInput: function(el){
		this.draw_additional(el.target.value);
	},
	
	countChars: function(text){
		this.counterChars = this.options.availSizes[this.options.size].chars;
		text.split('').each(function(item){
		    var regex_chars = /[0-9a-zA-Z\-]+$/;
			var regex_symbols = /[\s\.\']+$/;
			if(regex_chars.test(item)){
				this.counterChars--;
			} else if(regex_symbols.test(item)){
				this.counterChars = this.counterChars-0.5;
			}
		}, this);
		var display_counter = this.counterChars;
		if(this.counterChars <=0) display_counter = 0;
		if($('chars')) $('chars').set('html', display_counter);
	},
	
	setText: function(text){
		this.countChars(text);
		if(this.counterChars >= 0){
			this.options.text = this._clean_text(text);	
			this.post.text.set('value', text);
			this.draw_text();
			this.draw_sample_text();
		} 
		$(this.options.textInput).set('value', this.options.text);
	},
	
	_clean_text: function(text){
		var regex = /[^0-9a-zA-Z\s\.\'\-]+$/;
		text = text.replace(regex,"");
		return text.toUpperCase();
	},
	
	setColour: function(colour){
		this.options.colour = colour;
		this.post.plate_colour.set('value', colour);
		this.draw();
		this.showSelected();
		//badCombo
		$(this.options.textInput+'_options').getChildren().each( function (el){
			el.setStyle('display', '');
			if(el.id ==  this.options.badCombo[colour]) el.setStyle('display', 'none');
		}, this);
		if($(this.options.additionalTextInput).value && this.options.size == 'euro') this.draw_additional($(this.options.additionalTextInput).value);
	},
	
	setTextColour: function(colour){
		this.options.textColour = colour;
		this.options.borderColour = colour;
		this.post.text_colour.set('value', colour);
		this.draw();
		this.showSelected();
		//badCombo
		$(this.options.colourInput+'_options').getChildren().each( function (el){
			el.setStyle('display', '');
			if(this.options.badCombo[el.id] == colour) el.setStyle('display', 'none');
		}, this);
		if($(this.options.additionalTextInput).value && this.options.size == 'euro') this.draw_additional($(this.options.additionalTextInput).value);
	},

	drawColours: function(){
		if(this.options.colourInput && $(this.options.colourInput+"_options")){
		$(this.options.colourInput+"_options").set('html', '');
		for(colour in this.options.availSizeColours[this.options.size]) {
			$(this.options.colourInput+"_options").adopt(		
				new Element('a', {'id':this.options.availSizeColours[this.options.size][colour]})
					.setStyle('background-color', 'rgb('+this.options.availSizeColours[this.options.size][colour]+')')
					.addEvent('click', function(el){
						this.setColour(el.target.id);
					}.bind(this))
				);
			}
		}
	},
	
	drawTextColours: function(){
		if(this.options.textInput && $(this.options.textInput+"_options")){
		$(this.options.textInput+"_options").set('html', '');
		for(colour in this.options.availTextColours) {
			$(this.options.textInput+"_options").adopt(
				new Element('a', {'id': this.options.availTextColours[colour]})
					.setStyle('background-color', 'rgb('+this.options.availTextColours[colour]+')')
					.addEvent('click', function(el){
						this.setTextColour(el.target.id);
					}.bind(this))
				);
			}
		}
	},

	drawSizes: function(){
		if(this.options.sizeInput && $(this.options.sizeInput+"_options")){
			var tr = $(this.options.sizeInput+"_options").getElements('input');
			tr.each( function(el){
				el.addEvent('click', function(el){
					this.setSize(el.target.value);
				}.bind(this));
			},this);
		}
	},

	drawOptions: function(){
		this.drawColours();
		this.drawTextColours();
		this.drawSizes();
		
	},
	
	draw: function(){
		this.draw_paper();
		this.draw_border();
		this.draw_plate();
		this.draw_holes();
		this.draw_text();
		
	},
	
	draw_paper: function(){
		if(this.options.paper != null) this.options.paper.remove();// = null;
		this.options.paper = Raphael(this.id,  
			this.options.availSizes[this.options.size].width+((this.options.borderThickness+this.options.outerBorderThickness)*2), 
			this.options.availSizes[this.options.size].height+((this.options.borderThickness+this.options.outerBorderThickness)*2));	
	},
	
	draw_text: function(){
		if(this.text) this.text.remove();
		this.center_text();
		this.text = this.options.paper.print(
				this.options.start_point.x, 
				this.options.availSizes[this.options.size].y, 
				this.options.text, 
				this.options.paper.getFont('Mandatory'), 
				this.options.availSizes[this.options.size].fontSize).attr(
					"fill", 
					this.gCt(this.options.textColour));
	},
	
	center_text: function (){
		var text = this.options.paper.print(
			this.options.start_point.x, 
			this.options.availSizes[this.options.size].y,
			this.options.text, 
			this.options.paper.getFont('Mandatory'), 
			this.options.availSizes[this.options.size].fontSize);
		this.options.start_point.x = ((this.options.availSizes[this.options.size].width/2)-(text.getBBox().width/2));
		text.remove();
	},
		
	draw_additional: function(a_text){
		var x = 0;
		if(this.post)this.post.additional_text.set('value', a_text);
		var text = this.options.paper.print(x, 16, a_text, this.options.paper.getFont('Mandatory'), 12);
		x = ((this.options.availSizes[this.options.size].width/2)-(text.getBBox().width/2))+3;
		text.remove();
		if(this.additional_text) 
			this.additional_text.remove();
		this.additional_text = this.options.paper.print( x, 16, a_text, this.options.paper.getFont('Helvetica'), 12)
								.attr( "fill", this.gCt(this.options.textColour));
	},
	
	remove_additional: function(){
		if(this.additional_text) this.additional_text.remove();
	},
	
	draw_plate: function(){
		this.options.paper.rect(
			(this.options.borderThickness+this.options.outerBorderThickness), 
			(this.options.borderThickness+this.options.outerBorderThickness), 
			this.options.availSizes[this.options.size].width, 
			this.options.availSizes[this.options.size].height, 
			(this.options.borderThickness+this.options.outerBorderThickness))
			.attr({"fill":this.gC(this.options.colour), "stroke": this.gC(this.options.colour)});	
	},
	
	draw_border: function(){
		this.options.paper.rect(0, 0, 
			this.options.availSizes[this.options.size].width + (2 * this.options.borderThickness)+3, 
			this.options.availSizes[this.options.size].height + (2 * this.options.borderThickness)+2, 
			(this.options.borderThickness+this.options.outerBorderThickness))
			.attr({"fill":this.gC(this.options.colour), "stroke": this.gC(this.options.colour)});
		this.options.paper.rect(this.options.outerBorderThickness, this.options.outerBorderThickness, 
			this.options.availSizes[this.options.size].width + (2 * this.options.borderThickness), 
			this.options.availSizes[this.options.size].height + (2 * this.options.borderThickness), 
			(this.options.borderThickness+this.options.outerBorderThickness))
			.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
	},
	
	draw_holes: function(){
		if(this.options.size != 'euro'){
		this.options.paper.circle(10, 10, 3)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(this.options.availSizes[this.options.size].width-1, 10, 3)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(this.options.availSizes[this.options.size].width-1, this.options.availSizes[this.options.size].height-1, 3)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(10, this.options.availSizes[this.options.size].height-1, 3)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		}
	},
	
	draw_samples: function(){
		/*var sample = $('samples');
		sample.set('html', '');
		var ul = new Element('ul');
		sample.adopt(ul);
		this.sample = new Array();
		for(var i=0; i<2; i++){
			if(!$("sample"+i)){
				var li = new Element('li', {id:"sample"+i});
				ul.adopt(li);
				this.sample[i] = new Plate.Sample("sample"+i);
				this.sample[i].setText(this.options.text);
				this.sample[i].setSize(this.options.size);
				//needs to be random AND based on size?
				var c = Math.floor(Math.random() * this.options.count[this.options.size]);
				var t = Math.floor(Math.random() * 3);
				console.log(c,t);
				while(this.gCt(t) == this.gC(c)) t = Math.floor(Math.random() * 3);
				
				this.sample[i].setTextColour(t);
				this.sample[i].setColour(c);	
			}
		}*/
	},
	
	draw_sample_text: function(){
		/*for(var i=0; i<2; i++){
			if(this.sample)
				this.sample[i].setText(this.options.text);
		}*/
	},
	draw_sample_size: function(){
		/*for(var i=0; i<2; i++){
			if(this.sample){
				this.sample[i].setSize(this.options.size);
				this.sample[i].setText(this.options.text); // needed if text needs to be resized
			}
		}*/
	}
});

Plate.Sample = new Class({
	Extends: Plate.Base,
	options : { 
		samples: false,
		start_point:{x:0, y:22}, 
		outerBorderThickness: 1,
		borderThickness : 2,
		textInput: false, 
		sizeInput: false, 
		colourInput: false, 
		borderColour: "#FFFFFF",
		colour: "#FFFFFF",
		textColour: '#000000',
		availSizes: {
			'small' : {'price':'35', 'y': 15, 'chars': 6.5, 'width': 92, 'height': 26, 	'fontSize':20, 'description': 'small', 'class':'small'},
			'medium': {'price':'40', 'y': 15, 'chars': 10, 'width': 140, 'height': 26,	'fontSize':20, 'description': 'medium', 'class':'medium'},
			'euro' : {'price':'50', 'y': 23, 'chars': 13, 'width': 150, 'height': 35, 	'fontSize':18, 'description': 'euro', 'class':'euro'}
		}
	},
	
	initialize: function(id, options){
		this.id = id;
		$extend(this.options, options);
		this.parent(id, options);
		$(this.id).addEvent('click', this.onClick.bind(this));
	},
	
	onClick: function(){
		this.plate_obj.setSize(this.options.size);
		this.plate_obj.setText(this.options.text);
		this.plate_obj.setColour(this.options.colour);
		this.plate_obj.setTextColour(this.options.textColour);
		$(this.plate_obj.options.textInput).set('value', this.options.text);
	},
	
	draw_holes: function(){
		if(this.options.size != 'euro'){
		this.options.paper.circle(7, 7, 2)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(this.options.availSizes[this.options.size].width-1, 7, 2)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(this.options.availSizes[this.options.size].width-1, this.options.availSizes[this.options.size].height-1, 2)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		this.options.paper.circle(7, this.options.availSizes[this.options.size].height-1, 2)
		.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
		}
	},
	draw_border: function(){
		this.options.paper.rect(0, 0, 
			this.options.availSizes[this.options.size].width + (2 * this.options.borderThickness)+2, 
			this.options.availSizes[this.options.size].height + (2 * this.options.borderThickness)+2, 
			(this.options.borderThickness+this.options.outerBorderThickness))
			.attr({"fill":this.gC(this.options.colour), "stroke": this.gC(this.options.colour)});
		this.options.paper.rect(this.options.outerBorderThickness, this.options.outerBorderThickness, 
			this.options.availSizes[this.options.size].width + (2 * this.options.borderThickness), 
			this.options.availSizes[this.options.size].height + (2 * this.options.borderThickness), 
			(this.options.borderThickness+this.options.outerBorderThickness))
			.attr({"fill":this.gCt(this.options.borderColour), "stroke": this.gC(this.options.colour)});
	},
	drawSizes: function(){},
	showSelected: function(){}
});