// COLOR SELECTOR


function CColorSelector(_div,_args){
	
	//read cookie
	this.args = {x:0.5,y:0.5,c1:'FFFFFF',c2:'FFFFFF',c3:'FFFFFF',c4:'FFFFFF'};
	for(var i in this.args){
		var arg = $.cookie('colorSelector'+i);
		
		if(typeof arg == 'number' || typeof arg == 'string'){
			this.args[i] = arg;
		}
		else if(typeof _args[i] == 'number' || typeof _args[i] == 'string') {
			this.args[i] = _args[i];
		}
	}
	
	
	
	
	//init html
	this.div = _div;
	
	this.but = document.createElement('div');
	this.but.className = 'but';
	
	var img = document.createElement('img');
	img.src = '_images/_img/img_color_hand.gif';
	
	this.but.appendChild(img);
	
	this.div1 = document.createElement('div');
	this.div2 = document.createElement('div');
	this.div3 = document.createElement('div');
	this.div4 = document.createElement('div');
	
	_div.appendChild(this.div1);
	_div.appendChild(this.div2);
	_div.appendChild(this.div3);
	_div.appendChild(this.div4);
	_div.appendChild(this.but);
	
	
	//get position
	var pos = $(this.div).offset();
	this.left = pos.left;
	this.top = pos.top;
	this.width = $(this.div).width()-$(this.but).width();
	this.height = $(this.div).height()-$(this.but).height();
	
	this.butWidth2 = Math.round($(this.but).width()/2);
	this.butHeight2 = Math.round($(this.but).height()/2);
	
	
	var that = this;
	
	//set drag event
	$(this.but).draggable({
		containment: 'parent',
		stop:function(event,ui){
			var div = $(that.div);
			var pos = div.offset();
			that.args.x = (ui.position.left-that.left)/that.width;
			that.args.y = (ui.position.top-that.top)/that.height;
			that.set(that.args);	
		}
	});
	
	this.set(this.args);
	
	
}
CColorSelector.prototype = {
	
	
	but:null,
	div1:null,
	div2:null,
	div3:null,
	div4:null,
	
	set:function(_args){
		
		for(var i in this.args){
			if(_args && (typeof _args[i] == 'number' || typeof(_args[i]) == 'string') ){
				$.cookie('colorSelector'+i,_args[i]);
				this.args[i] = _args[i];
			}
		}
		
		this.args.x = (this.args.x<0) ? 0 : this.args.x;
		this.args.x = (this.args.x>1) ? 1 : this.args.x;
		
		this.args.y = (this.args.y<0) ? 0 : this.args.y;
		this.args.y = (this.args.y>1) ? 1 : this.args.y;
		
		
		//set bg and position
		var x = Math.round(this.args.x*this.width);
		var y = Math.round(this.args.y*this.height);
		var w = this.width;
		var h = this.height;
		
		var x1 = this.left+this.butWidth2;
		var y1 = this.top+this.butHeight2;
		
		$(this.div1).css({left:x1		,top:y1		,width:x		,height:y		,backgroundColor:'#'+_args.c1});
		$(this.div2).css({left:x1+x	,top:y1		,width:w-x	,height:y		,backgroundColor:'#'+_args.c2});
		$(this.div3).css({left:x1		,top:y1+y	,width:x		,height:h-y	,backgroundColor:'#'+_args.c3});
		$(this.div4).css({left:x1+x	,top:y1+y	,width:w-x	,height:h-y	,backgroundColor:'#'+_args.c4});
		
		$(this.but).css({left:this.left+x,top:this.top+y});
		
		var url = 'bg.php?x='+Math.round(this.args.x*72.0)+'&y='+Math.round(this.args.y*72.0)
		url += '&c1='+this.args.c1+'&c2='+this.args.c2+'&c3='+this.args.c3+'&c4='+this.args.c4;
		$('body').css({backgroundImage : 'url('+url+')'});
			
	}
	
};