/**Compare colors
 *@author danyastuff
 */

var ColorPanton = function (set) {
	this.set = set; //{body}
	this.setHandlers();
	this.HSV = COLOR.rgb2hsv(COLOR.css2rgb(this.set.defaultColor));
	this.setH(this.HSV.h);
	this.setS(this.HSV.s);
	this.setV(this.HSV.v);
	
	this.set.onChange(this.set.defaultColor.replace('#', ''));
}

ColorPanton.prototype = {	
	setHandlers : function () {
		var self = this,
			body = this.body = this.set.$body;
		
	 // sv-picker drag
		var svPicker = this.body.svPicker = body.find('.sv-picker'),
			svArea   = this.body.svArea   = body.find('.panton');
			
		svPicker.w = svPicker.width()  / 2;
		svPicker.h = svPicker.height() / 2;
		svPicker.dragable = false;
		
		svArea.w  = svArea.width();
		svArea.h  = svArea.height();
		svArea.ol = svArea.offset().left;
		svArea.ot = svArea.offset().top;
		
		svPicker.mouseover(function() { svPicker.dragable = true  })
		svPicker.mouseout (function() { svPicker.dragable = false })
		svPicker.drag(
			function () {}, //before drag
			function (e) {
				var offX = e.offsetX - svArea.ol + svPicker.w,
					offY = e.offsetY - svArea.ot + svPicker.h;
					
				self.setS(offX / svArea.w * 100);
				self.setV(100 - offY / svArea.h * 100);
				
				self.onHSVChange();			
			},
			function () { //after drag
				
			}
		)//drag
		
	 // h-picker drag
		var hPicker = this.body.hPicker = body.find('.h-picker'),
			hArea   = this.body.hArea   = body.find('.rainbow');
			
		hPicker.w = hPicker.width() / 2;
		hArea.w	  = hArea.width();
		hArea.ol  = hArea.offset().left;
		
		hPicker.drag(
			function () {},
			function (e) {
				var offX = e.offsetX - hArea.ol + hPicker.w;
				self.setH( offX / hArea.w * 360 );
				self.onHSVChange();
			},
			function () {}
		)
		
	 // sv-area mousedown
		svArea.mousedown(function (e) {
			if (! svPicker.dragable) {
				var offX = e.pageX - svArea.ol,
					offY = e.pageY - svArea.ot;  
				self.setS(offX / svArea.w * 100);
				self.setV(100 - offY / svArea.h * 100);
				self.onHSVChange();
			}
		})
	 // h-area mousedown
		hArea.mousedown(function (e) {
			var offX = e.pageX - hArea.ol;
			self.setH(offX / hArea.w * 360);
			self.onHSVChange();
		})
	},
	setH : function (h) {
		if (h < 0)   h = 0; 
		if (h > 360) h = 360;
		
		var hArea = this.body.hArea,
			hPicker  = this.body.hPicker,
			offX = hArea.w * h/360 - hPicker.w,
			x = offX > hArea || offX < -hPicker.w  
				? hPicker.css('left')
				: offX;
				
		hPicker.css('left', x);
		this.HSV.h = Math.round(h);
		
		var bright = {h: this.HSV.h, s:100, v:100};
		this.body.svArea.css('background-color', '#'+COLOR.rgb2css(COLOR.hsv2rgb(bright)) );
	},
	setS : function (s) {
		if (s < 0)	 s = 0;
		if (s > 100) s = 100;
		
		var svArea = this.body.svArea,
			svPicker = this.body.svPicker,
			offX = svArea.w * s/100 - svPicker.w,
			x = offX > svArea.w || offX < -svPicker.w  
				? svPicker.css('left')
				: offX;
				
		svPicker.css('left', x);
		this.HSV.s = Math.round(s);
	},
	setV : function (v) {
		if (v < 0)	 v = 0;
		if (v > 100) v = 100;
		
		var svArea = this.body.svArea,
			svPicker = this.body.svPicker,
			offY = svArea.h * (100-v)/100 - svPicker.h,
			y = offY > svArea.h || offY < -svPicker.h  
				? svPicker.css('top')
				: offY;
				
		svPicker.css('top', y);
		this.HSV.v = Math.round(v);
	},
	setCSS : function (css) {
		var hsv = COLOR.rgb2hsv( COLOR.css2rgb(css) );
		this.setH(hsv.h);
		this.setS(hsv.s);
		this.setV(hsv.v);
		this.onHSVChange();
	},
	onHSVChange : function () {
		this.set.onChange( COLOR.rgb2css(COLOR.hsv2rgb(this.HSV)) )  
	}
}