var HUDWindow = new Class({
	
	Implements: [Options, Events],

	options: {
		id: '',
		toggle: '',
		title: '',
		imagePath: 'images/',
		width: 300,
		height: 380
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.HUDx = this.options.id+'_pos_x';
		this.HUDy = this.options.id+'_pos_y';
		s = 0;
		t = 0;
		
		this.win_height = window.getSize().y;
		//console.log(this.win_height);
		this.win_width = window.getSize().x;
		if( this.win_height%2 != 0 ){
			this.win_height -= 1;
		}
		if( this.win_width%2 != 0 ){
			this.win_width -= 1;
		}
		
		this.huds = new Hash.Cookie('HUD',{duration: 365});
		
		if(!this.huds.get(this.HUDx)) {
			this.huds.set(this.HUDx,(0.5 * this.win_width) - 0.5*this.options.width);
			this.huds.set(this.HUDy,(0.5 * this.win_height) - 0.5*this.options.height);
		}
		
		this.drawer = new Element('div', {
			'styles': {
				'position': 'absolute',
				'top': '20',
				'left': '20',
				'border': '0',
				'height': '380px',
				'width': '300px',
				'overflow': 'hidden',
				'display': 'none',
				'background': 'transparent url('+this.options.imagePath+'HUD.png)',
				'z-index':9000
			},
			'class': 'js-dom',
			'id': this.options.id
		});
		
		this.drawer.setStyle('left',this.huds.get(this.HUDx));
		this.drawer.setStyle('top',this.huds.get(this.HUDy));
		
		this.drawer_close = new Element('div', {
			'styles': {
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'border': '0',
				'height': '38px',
				'width': '45px',
				'padding': '0',
				'overflow': 'hidden',
				'z-index':9000
	
			},
			'class': 'js-dom'
		});
		
		this.drawer_close.addEvent('click',function(e) {
			this.hide();
		}.bind(this));
		
		this.picker = $(this.options.toggle);
		this.picker.addEvent('click',function(e) {
			this.show();
		}.bind(this));
		
		this.drawer_headline = new Element('div', {
			'styles': {
				'position': 'absolute',
				'top': '20px',
				'right': '40px',
				'left': '40px',
				'width': '220px',
				'text-align': 'center',
				'height': '18px',
				'line-height': '18px',
				'font-size': '11px',
				'color': '#fff',
				'font-family': 'Helvetica,Arial,"Trebuchet MS",Verdana,sans-serif'
			},
			'id': 'thandle',
			'class': 'js-dom'
		}).appendText(this.options.title).inject(this.drawer);
		
		
		new Drag(this.drawer, {
			limit: {
				x: [0, this.win_width - this.options.width],
				y: [0, this.win_height - this.options.height]
			},
			onComplete: function(){
				this.persist()
			}.bind(this)
		});
	},
	
	persist: function() {
		d_left = this.drawer.getLeft();
		d_top = this.drawer.getTop();
		//console.log('left:'+d_left);
		//console.log('top:'+d_top);
		this.huds.set(this.drawer.id+'_pos_x',d_left);
		this.huds.set(this.drawer.id+'_pos_y',d_top);		
	},
	
	show: function() {
		this.drawer.setStyle('display','');
	},
	
	hide: function() {
		this.drawer.setStyle('display','none');
	},
	
	render: function() {
		this.drawer.injectTop(document.body);
		this.drawer_close.inject(this.drawer,'top');
	},
	
	destroy: function() {
		this.drawer.dispose();
	}
	
});

var ListHUD = new Class({

    Extends: HUDWindow,

	initialize: function(options) {
		this.parent(options)
		
		this.drawer_content = new Element('iframe', {
			'styles': {
				'position': 'relative',
				'top': '38px',
				'right': '12px',
				'bottom': '10px',
				'left': '20px',
				'width': '260px',
				'height': '310px',
				'padding': '0px',
				'margin':'0px',
				'background-color': 'transparent',
				'border-width': '0px'
			},
			'border': '0',
			'frameborder': '0',
			'marginwidth': '0',
			'marginheight': '0',
			'scrolling': 'no',
			'class': 'js-dom',
			'id': 'drawer_content',
			'src': 'table.html'
		}).inject(this.drawer);
				
	}

});

var ColorPickerHUD = new Class({
	
	Extends: HUDWindow,
	
	initialize: function(options) {
		this.parent(options)
		
		this.drawer_content = new Element('div', {
			'styles': {
				'position': 'absolute',
				'top': '38px',
				'right': '20px',
				'bottom': '20px',
				'left': '20px',
				'width': '239px',
				'height': '299px',
				'color': '#fff',
				'overflow': 'hidden',
				'padding': '10px',
				'font-family':'Helvetica,Arial',
				'font-size': '12px',
				'z-index': '9000'
			},
			'class': 'js-dom',
			'id': 'drawer_content'
		}).inject(this.drawer);
		
		this.slider = new Element('div', {
			'id': 'slider'
		}).inject(this.drawer_content);
		
		this.knob = new Element('div', {
			'id': 'knob'
		}).inject(this.slider);
		

		
	}
	
});

/*
Script: Slider.js
	Class for creating horizontal and vertical slider controls.

License:
	MIT-style license.
*/

var RGBSlider = new Class({

	Implements: [Events, Options],

	options: {/*
		onChange: $empty,
		onComplete: $empty,*/
		onTick: function(position){
			if(this.options.snap) position = this.toPosition(this.step);
			this.knob.setStyle(this.property, position);
		},
		snap: false,
		offset: 0,
		range: false,
		wheel: false,
		steps: 100,
		mode: 'horizontal'
	},

	initialize: function(element, knob, options){
		this.setOptions(options);
		this.element = $(element);
		this.knob = $(knob);
		this.previousChange = this.previousEnd = this.step = -1;
		this.element.addEvent('mousedown', this.clickedElement.bind(this));
		if (this.options.wheel) this.element.addEvent('mousewheel', this.scrolledElement.bindWithEvent(this));
		var offset, limit = {}, modifiers = {'x': false, 'y': false};
		switch (this.options.mode){
			case 'vertical':
				this.axis = 'y';
				this.property = 'top';
				offset = 'offsetHeight';
				break;
			case 'horizontal':
				this.axis = 'x';
				this.property = 'left';
				offset = 'offsetWidth';
		}
		this.half = this.knob[offset] / 2;
		this.full = 225;
		this.min = $chk(this.options.range[0]) ? this.options.range[0] : 0;
		this.max = $chk(this.options.range[1]) ? this.options.range[1] : this.options.steps;
		this.range = this.max - this.min;
		this.steps = this.options.steps || this.full;
		this.stepSize = Math.abs(this.range) / this.steps;
		this.stepWidth = this.stepSize * this.full / Math.abs(this.range) ;
		
		this.knob.setStyle('position', 'relative').setStyle(this.property, - this.options.offset);
		modifiers[this.axis] = this.property;
		limit[this.axis] = [- this.options.offset, this.full - this.options.offset];
		this.drag = new Drag(this.knob, {
			snap: 0,
			limit: limit,
			modifiers: modifiers,
			onDrag: this.draggedKnob.bind(this),
			onStart: this.draggedKnob.bind(this),
			onComplete: function(){
				this.draggedKnob();
				this.end();
			}.bind(this)
		});
		if (this.options.snap) {
			this.drag.options.grid = Math.ceil(this.stepWidth);
			this.drag.options.limit[this.axis][1] = this.full;
		}
	},

	set: function(step){
		if (!((this.range > 0) ^ (step < this.min))) step = this.min;
		if (!((this.range > 0) ^ (step > this.max))) step = this.max;
		
		this.step = Math.round(step);
		this.checkStep();
		this.end();
		this.fireEvent('tick', this.toPosition(this.step));
		return this;
	},

	clickedElement: function(event){
		var dir = this.range < 0 ? -1 : 1;
		var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
		position = position.limit(-this.options.offset, this.full -this.options.offset);
		
		this.step = Math.round(this.min + dir * this.toStep(position));
		this.checkStep();
		this.end();
		this.fireEvent('tick', position);
		event.stop();
	},
	
	scrolledElement: function(event){
		var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
		this.set(mode ? this.step - this.stepSize : this.step + this.stepSize);
		event.stop();
	},

	draggedKnob: function(){
		var dir = this.range < 0 ? -1 : 1;
		var position = this.drag.value.now[this.axis];
		position = position.limit(-this.options.offset, this.full -this.options.offset);
		this.step = Math.round(this.min + dir * this.toStep(position));
		this.checkStep();
	},

	checkStep: function(){
		if (this.previousChange != this.step){
			this.previousChange = this.step;
			this.fireEvent('change', this.step);
		}
	},

	end: function(){
		if (this.previousEnd !== this.step){
			this.previousEnd = this.step;
			this.fireEvent('complete', this.step + '');
		}
	},

	toStep: function(position){
		var step = (position + this.options.offset) * this.stepSize / this.full * this.steps;
		return this.options.steps ? Math.round(step -= step % this.stepSize) : step;
	},

	toPosition: function(step){
		return (this.full * Math.abs(this.min - step)) / (this.steps * this.stepSize) - this.options.offset;
	}

});