var color = new Color([0, 0, 0]);
var updateme = false;
ways = ['left top, right top',
		'left top, left bottom',
		'right top, left top',
		'right bottom, right top'];
myway = 0;

window.addEvent('domready',function(){
	window.addEvent('keyup',function(e){
		ev = new Event(e);
		if(ev.key == 'backspace' && $$('.point').length > 2){
			$(updateme).dispose();
			updateGradient();
			$$('.point')[0].fireEvent('click');
		}
	});

	$$('.point').each(function(el,i){
		var myDrag = new Drag(el,{
			limit: {'x':[0,580],'y':[40,40]},
			grid: 2,
			onStart: function(){
				setColor(el);
			},
			onDrag: function(){
				updateGradient();
			}
		});
		
		el.addEvent('click',function(){
			setColor(el);
		});
	});
	
	$('gradient').addEvent('dblclick',function(ev){
		ev.stop();
		pos = ev.page.x - $('gradient').getLeft().toInt();
		n = new Element('div',{
			'class':'point',
			'styles':{
				'left':pos + 'px'
			},
			'events':{
				'click':function(){
					setColor(this);
				}
			}
		}).injectInside($('gradient'));
		var myDrag = new Drag(n,{
			limit: {'x':[0,580],'y':[40,40]},
			grid: 2,
			onDrag: function(){
				updateGradient();
			}
		});
		updateGradient();
		n.fireEvent('click');
	});
	
	$$('.slider').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: 255,  // Steps from 0 to 255
			offset: 5,
			wheel: true, // Using the mousewheel is possible too
			onChange: function(){
				// Based on the Slider values set an RGB value in the color array
				color[i] = this.step;
				updateColor();
			}
		}).set(0);
		el.store('slider',slider);
	});
	
	$$('#inputs input').each(function(el,i){
		el.addEvent('keyup',function(e){
			if($type(el.get('value').toInt()) != 'number'){
				el.set('value',0)
			}
			$$('.slider')[i].retrieve('slider').set(el.get('value').toInt());
		});
	});
	
	$$('.gradient-option').each(function(el,i){
		el.addEvent('click',function(){
			$$('.option-selected').removeClass('option-selected');
			el.addClass('option-selected');
			myway = i;
			updateGradient();
		});
	});
	
	$$('.point')[0].fireEvent('click');
});

function setColor(el) {
	$$('.sel').removeClass('sel');
	el.addClass('sel');
	color = new Color(el.getStyle('background-color'));
	updateme = el;
	updateColor();
	$$('.slider').each(function(el,i){
		el.retrieve('slider').set(color[i]);
	});
};

function updateColor() {
	$('demobox').setStyle('background-color',color);
	$('demobox').setStyle('border-color',color.invert().setSaturation(0));
	$$('#inputs input').each(function(el,i){
		el.set('value',color[i]);
	});
	if(updateme){
		updateme.setStyle('background-color',color);
		updateGradient();
	}
};

function updateGradient(){
	style = "";
	$$('.point').each(function(el,i){
		style = style + ", color-stop(" + (el.getStyle('left').toInt()/580).round(2) + ", " + el.getStyle('background-color') + ")";
	});
	style = style + ")";
	$('gradient').setStyle('background',"-webkit-gradient(linear, " + ways[0] + style);
	$('gradient-output').set('value',"-webkit-gradient(linear, " + ways[myway] + style);
	options = $$('.gradient-option');
	ways.each(function(way,i){
		options[i].setStyle('background',"-webkit-gradient(linear, " + way + style);
	});
}