/*
Any usage of this JavaScript code or interface parts IS NOT allowed without owner's (Sergii Iavorskyi) agreement, since it is his intelectual property
Please use contact form on site if you have any questions or offers.
*/


//--------------------------- .common/fixes.js --------------------------

try{
	document.execCommand("BackgroundImageCache", false, true);
}catch(err){}

//--------------------------- .common/Extensions.class.js --------------------------

var Extensions={
	isIE: navigator.appVersion.match(/MSIE/i),
	
	supportPNG24: !navigator.appVersion.match(/MSIE [65]/),
	
	setOpacity:function(opacity){
		if(opacity<0){
			opacity=0;
		}
		if(opacity>100){
			opacity=100
		}
			
		this.style.opacity = opacity/100;
		try{
			this.style.filter = 'alpha(opacity=' + opacity + ')';
		}catch(err){}
		
		this._opacity=opacity;
	},
	
	getOpacity:function(){
		if(typeof(this._opacity)=='undefined'){
			return 100;
		}
		return this._opacity;
	},
	
	getPos:function(obj){
		var x=obj.offsetLeft;
		var y=obj.offsetTop;
		for(i=obj; i=i.offsetParent; x+=parseInt(i.offsetLeft),y+=parseInt(i.offsetTop));
		return {x:x, y:y}
	},
	
	getEventPos:function(e){
		if (!e)
			var e = window.event;
		if (e.pageX){
			posx = e.pageX;
			posy = e.pageY;
		}else if (e.clientY){
			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		return {x:posx, y:posy}
	},
	
	createElement:function(elementName,addStyle,cssClassName){
		var elm=document.createElement(elementName);
		if(typeof(addStyle)!='undefined'){
			for(var property in addStyle){
				elm.style[property]=addStyle[property];
			}
		}
		if(typeof(cssClassName)!='undefined')
			elm.className=cssClassName;
		return elm;
	},
	
	//---------------------css---------------------
	
	addCssClass:function(element,className){
		var patt=new RegExp(className,'i');
		if(!patt.test(String(element.className)))
			element.className=element.className+' '+className;
		
	},
	
	removeCssClass:function(element,className){
		var patt=new RegExp('\s*'+className,'i');
		if(patt.test(String(element.className)))
			element.className=String(element.className).replace(patt,'');
	},
	
	//----------------scroll window---------------
	
	scrollToTop:function(winObj){
		var win=(typeof(winObj)=='undefined')?top:winObj;
		//Util.printObj(win);
		try{
			win.scroll(0,0);
		}catch(err){}
	}
}

//--------------------------- .common/Util.js --------------------------

var Util={
	posX:10,
	posY:10,
	
	showBlind:function(status){
		if(!this.blind){
			this.blind=((document.getElementsByTagName('body'))[0]).appendChild(document.createElement('div'));
			with(this.blind.style){
				backgroundColor='transparent';
				width='50px';
				height='80px';
				position='absolute';
				top=0;
				left=0;
				zIndex='1000'
			}
		}
	},
	
	//create debug layer (this.trace)
	debugLayer:null,
	
	trace:function(str){
		if(!traceIsOn)
			return false;
		if(!this.debugLayer){
			this.debugLayer=((document.getElementsByTagName('body'))[0]).appendChild(document.createElement('div'));
			this.debugLayer.innerHTML='<a href="javascript:Util.clearDebug()">clear</a><br>';
			with(this.debugLayer.style){
				position='absolute';
				padding='10px';
				color='#090';
				backgroundColor='#fff';
				top=this.posY+'px';
				left=this.posX+'px';
				zIndex='1000'
			}
		}
		this.debugLayer.innerHTML=this.debugLayer.innerHTML+'<br>'+str;
	},
	
	ctrace:function(str){
		this.clearDebug();
		this.trace(str);
	},
	
	printObj:function(obj){
		this.trace('---------object----------');
		for(var i in obj){
			if(typeof(obj[i])=='function'){
				this.trace(i+'=function(){...}')
			}else{
				this.trace(i+'='+obj[i])
			}
		}
		this.trace('--------end object-------');
	},
	
	clearDebug:function(){
		this.debugLayer.innerHTML='<a href="javascript:Util.clearDebug()">clear</a><br>';
	},
	
	setPos:function(posX,posY){
		this.posX=posX;
		this.posY=posY;
		if(this.debugLayer){
			this.debugLayer.style.left=posX+'px';
			this.debugLayer.style.top=posY+'px';
		}
	}
}

//--------------------------- JSColorPicker.class.js --------------------------

function JSColorPicker(initParams){ //{url skinPath, int x, int y}
	if(initParams==undefined)
	return;
	if(!document.createElement) //check DOM
	return;
	try{
		document.captureEvents(Event.MOUSEMOVE);
	}catch(err){}

	this.isIE=Extensions.isIE;
	this.fixPNG=!Extensions.supportPNG24;

	//----------- initialize params

	this.skinPath=initParams.skinPath;
	this.holder=(initParams.holder && typeof(document.getElementById(initParams.holder))!='undefined')?document.getElementById(initParams.holder):false;
	this.color=(initParams.color)?initParams.color.replace(/#/,''):'ff0000';

	//-------- create cpwin

	if(this.holder){
		this.cpwin=Extensions.createElement('div',{
			position:'relative',
			width:'310px',
			height:'277px'}
			);
			this.holder.appendChild(this.cpwin);
	}else{
		this.cpwin=Extensions.createElement('div',{
			position:'absolute',
			left:this.x+'px',
			top:this.y+'px',
			width:'310px',
			height:'277px',
			border:'1px solid #aaa',
			backgroundColor:'#eee'}
			);
			document.getElementsByTagName('body')[0].appendChild(this.cpwin);
	}

	//------------- create cp
	this.cp=this.cpwin.appendChild(Extensions.createElement('div',{
		position:'absolute',
		width:'256px',
		height:'256px',
		backgroundColor:'#ffffff',
		left:0,
		top:0
	}));
	this.cp.trackMouseMove=false;
	this.cp.parent=this;
	this.cp.width=256;
	this.cp.height=256;

	if(this.fixPNG){
		this.cp.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='"+this.skinPath+"colorpicker/sat.png')";
	}else{
		this.cp.style.backgroundImage='url('+this.skinPath+'colorpicker/sat.png)';
	}

	try{
		this.cp.style.cursor="url("+this.skinPath+"cursors/cursor_colormarker.cur), crosshair";
	}catch(err){}

	
	this.cp._setColor=function(rgb){
		this.style.backgroundColor='#'+rgb.r.toHex()+rgb.g.toHex()+rgb.b.toHex();
	}

	this.cp._setSV=function(s,v){
		var s=parseInt(this.width*s);
		if(s>=256-this.parent.marker.height)
			s=256-this.parent.marker.height;
		
		this.picker.style.left=s+'px';
		this.picker.style.top=parseInt(this.height-this.height*v)+'px';
	}

	this.cp._showPicker=function(){
		this.picker.style.display='block';
	}
	this.cp._hidePicker=function(){
		this.picker.style.display='none';
	}
	this.cp._trackMouse=function(e){
		var cpPos=Extensions.getPos(this);
		var mousePos=Extensions.getEventPos(e);

		this.parent.hsvColor.s=Math.round((mousePos.x-cpPos.x)/255*100)/100;
		this.parent.hsvColor.v=1-Math.round((mousePos.y-cpPos.y)/255*100)/100;

		this.picker.style.left=parseInt(mousePos.x-cpPos.x-this.picker.width/2)+'px';
		this.picker.style.top=parseInt(mousePos.y-cpPos.y-this.picker.height/2)+'px';

		this.parent._recalcColor();
	}


	//-------------- create picker

	this.cp.picker=this.cp.appendChild(Extensions.createElement('div',{
		position:'absolute',
		width:'11px',
		height:'11px',
		background:'url('+this.skinPath+'colorpicker/bg_picker.gif) no-repeat',
		left:'10px',
		top:'10px'
	}));
	this.cp.picker.width=11;
	this.cp.picker.height=11;


	//-------------- create bar

	this.bar=this.cpwin.appendChild(Extensions.createElement('div',{
		position:'absolute',
		width:'19px',
		height:'256px',
		backgroundImage:'url('+this.skinPath+'colorpicker/bar.png)',
		left:'270px',
		top:0
	}));
	this.bar.height=256;
	this.bar.parent=this;
	this.bar._setH=function(h){
		var h=parseInt((this.parent.bar.height-this.parent.marker.height/2)*(360-h)/360);
		this.parent.marker.style.top=h+'px';
	}

	//----------- create marker

	this.marker=this.cpwin.appendChild(Extensions.createElement('div',{
		position:'absolute',
		width:'38px',
		height:'9px',
		left:'260px',
		top:'6px',
		overflow:'hidden'
	}));
	this.marker.width=38;
	this.marker.height=9;
	if(this.fixPNG){
		this.marker.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='"+this.skinPath+"colorpicker/slidemarker.gif')";
	}else{
		this.marker.style.backgroundImage='url('+this.skinPath+'colorpicker/slidemarker.gif)'
	}
	try{
		this.marker.style.cursor='url('+this.skinPath+'cursors/cursor_hand.cur), default';
	}catch(err){}
	this.marker.parent=this;

	/*-------- RGB - HSV convertion ------*/
	Number.prototype.toHex=function(){
		var val=this.toString(16);
		return (val.length==1)?'0'+val:val;
	}
	String.prototype.toDec=function(){
		var digits='0123456789ABCDEF';
		var val=0;
		var pos='';

		for(var i=0; i<this.length; i++){
			pos=digits.indexOf(this.substr(i,1).toUpperCase());
			if(pos==-1)
			return NaN;
			val+=pos*Math.pow(16,this.length-i-1);
		}
		return val;
	}

	this._rgb2hsv=function(r,g,b){
		r/=255;
		g/=255;
		b/=255;

		var minVal = Math.min(r, g, b);
		var maxVal = Math.max(r, g, b);
		var delta = maxVal - minVal;

		var h,s,v;

		v = maxVal;

		if (delta == 0) {
			h = 0;
			s = 0;
		} else {
			s = delta / maxVal;
			var del_R = (((maxVal - r) / 6) + (delta / 2)) / delta;
			var del_G = (((maxVal - g) / 6) + (delta / 2)) / delta;
			var del_B = (((maxVal - b) / 6) + (delta / 2)) / delta;

			if (r == maxVal) {h = del_B - del_G;}
			else if (g == maxVal) {h = (1 / 3) + del_R - del_B;}
			else if (b == maxVal) {h = (2 / 3) + del_G - del_R;}

			if (h < 0) {h += 1;}
			if (h > 1) {h -= 1;}
		}
		h = Math.round(h*360);
		s = Math.round(s*100)/100;
		v = Math.round(v*100)/100;

		return {h:h,s:s,v:v};
	}

	this._hsv2rgb=function(h,s,v){
		h/=360;
		if (s == 0){                       //HSV values = 0 ÷ 1
			var r=v*255
			var g=v*255
			var b=v*255
		}else{
			var_h=h*6
			if (var_h ==6)
			var_h=0	//h must be<1
			var_i=parseInt(var_h)	//Or...var_i=floor(var_h)
			var_1=v*(1-s)
			var_2=v*(1-s*(var_h-var_i))
			var_3=v*(1-s*(1-(var_h-var_i)))

			if ( var_i==0){var_r=v;var_g=var_3;var_b=var_1}
			else if(var_i==1){var_r=var_2;var_g=v;var_b=var_1}
			else if(var_i==2){var_r=var_1;var_g=v;var_b=var_3}
			else if(var_i==3){var_r=var_1;var_g=var_2;var_b=v}
			else if(var_i==4){var_r=var_3;var_g=var_1;var_b=v}
			else {var_r=v;var_g=var_1;var_b=var_2}

			var r=var_r*255 //RGB results = 0 ÷ 255
			var g=var_g*255
			var b=var_b*255
		}
		return {r:Math.round(r),g:Math.round(g),b:Math.round(b)};
	}

	/*--------behavior for cp ------*/
	this.cp.onmousedown=function(e){
		this._trackMouse(e);
		this._hidePicker();
		this.trackMouseMove=true;
		this.parent._recalcColor();
	}

	this.cp.onmouseup=function(){
		this._showPicker()
		this.trackMouseMove=false;
		//this.parent._recalcColor();
	}

	this.cp.onmousemove=function(e){
		if(this.trackMouseMove)
		this._trackMouse(e);
	}

	this.cp.onmouseover=function(){
		if(this.trackMouseMove)
		this._hidePicker();
	}

	this.cp.onmouseout=function(){
		this.trackMouseMove=false;
		this._showPicker()
	}

	/*--------- behavior for bar ----------*/
	this.bar.onclick=function(e){
		var barPos=Extensions.getPos(this);
		var mousePos=Extensions.getEventPos(e);

		posy=mousePos.y-barPos.y;

		this.parent.marker.style.top=parseInt(this.parent.marker.height/2)+posy+'px'

		this.parent.hsvColor.h=Math.round((this.height-posy)/this.height*360);
		this.parent._recalcColor();
	}
	try{
		this.bar.style.cursor='pointer'
	}catch(err){}

	/*--------behavior for marker------*/
	this.markerActive=false;
	this.defaultMousemoveHandler=null;

	this.marker.y=0;
	this.marker.height=9;

	this.marker.onmousedown=function(e){
		try{
			this.parent.marker.style.cursor='url('+this.parent.skinPath+'cursors/cursor_handhold.cur), move'
		}catch(err){}
		this.parent.markerActive=true;

		window.jscp_activeColorPicker=this.parent;
		this.parent.defaultMousemoveHandler=document.onmousemove;
		this.parent.defaultMouseupHandler=document.onmouseup;

		document.onmouseup=function(){
			document.onmouseup=jscp_activeColorPicker.defaultMouseupHandler;
			document.onmousemove=jscp_activeColorPicker.defaultMousemoveHandler;
			jscp_activeColorPicker.markerActive=false;
			try{
				jscp_activeColorPicker.marker.style.cursor='url('+jscp_activeColorPicker.skinPath+'cursors/cursor_hand.cur), default'
			}catch(err){}
		}

		document.onmousemove=function(e){
			var marker=jscp_activeColorPicker.marker;
			var bar=jscp_activeColorPicker.bar;

			var barPos=Extensions.getPos(bar);
			var mousePos=Extensions.getEventPos(e);

			posy=mousePos.y-barPos.y;

			if(posy>=0 && posy<=bar.height)
				jscp_activeColorPicker._recalcColor();

			if(posy<0)
				posy=0
			if(posy>=bar.height)
				posy=bar.height;

			marker.style.top=posy-Math.round(marker.height/2)+'px';
			jscp_activeColorPicker.hsvColor.h=Math.round(360-posy/bar.height*360);
		}
	}

	this.marker.onmouseup=function(){
		try{
			this.style.cursor='url('+this.parent.skinPath+'cursors/cursor_hand.cur), default'
		}catch(err){}
		document.onmousemove=jscp_activeColorPicker.defaultMousemoveHandler;
		jscp_activeColorPicker.markerActive=false;
		this.parent.markerActive=false;
	}

	//----------------- init

	this._recalcColor=function(){
		this.rgbColor=this._hsv2rgb(
			this.hsvColor.h,
			this.hsvColor.s,
			this.hsvColor.v
		);
		this.cp._setColor(this._hsv2rgb(this.hsvColor.h,1,1))
		this.color=this.rgbColor.r.toHex()+this.rgbColor.g.toHex()+this.rgbColor.b.toHex();

		this.onChange(this.color);
	}

	//--------------- public methods
	
	this.onChange=function(){};
	
	this.setColor=function(color){
		String(color).replace('#','');
		
		this.rgbColor={
			r:color.substr(0,2).toDec(),
			g:color.substr(2,2).toDec(),
			b:color.substr(4,2).toDec()
		};
		
		this.hsvColor=this._rgb2hsv(
			this.rgbColor.r,
			this.rgbColor.g,
			this.rgbColor.b
		);
		
		this.bar._setH(this.hsvColor.h);
		this.cp._setSV(this.hsvColor.s, this.hsvColor.v);
		this._recalcColor();
	}
	
	
	this.setColor(this.color);
	return this;
}

//--------------------------- JSHSlider.class.js --------------------------

function JSHSlider(initParams){
	/*
	holderId
	holder
	x
	y
	boxWidth
	boxHeight
	cornerWidth
	markerWidth
	markerHeight
	skinPath
	*/
	
	if(!document.createElement) //check DOM
		return;
	
	try{
		document.captureEvents(Event.MOUSEMOVE);
	}catch(err){}
	
	//------------ initialization
	
	this.params=initParams;
	this.value=0;
	
	this.onChange=function(perc){}
	this.onStart=function(){}
	this.onStop=function(){}
	
	//------------ create objects
	
	if(typeof(this.params.holder)!='undefined'){
		this.holder=this.params.holder;
	}
	if(document.getElementById(this.params.holderId)){
		this.holder=document.getElementById(this.params.holderId);
	}
	if(!this.holder){
		this.box=document.getElementsByTagName('body')[0].appendChild(Extensions.createElement('div',{
			position:	'absolute',
			width:		this.params.boxWidth+'px',
			height:		this.params.boxHeight+'px',
			left:		this.params.x+'px',
			top:		this.params.y+'px'
		}));
	}else{
		if(typeof(this.params.x)!='undefined' && typeof(this.params.y)!='undefined'){
			this.box=this.holder.appendChild(Extensions.createElement('div',{
				position:	'relative',
				left:		this.params.x+'px',
				top:		this.params.y+'px'
			}));
		}else{
			this.box=this.holder.appendChild(Extensions.createElement('div',{
				position:	'relative'
			}));
		}
	}
	
	var pos=Extensions.getPos(this.box);
	this.params.x=pos.x;
	this.params.x=pos.y;
	
	this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.cornerWidth+'px',
		height:		this.params.boxHeight+'px',
		left:		'0px',
		top:		'0px',
		background:	'url('+this.params.skinPath+'bg_lcorner.gif) left center no-repeat'
	}));
	this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.boxWidth-2*this.params.cornerWidth+'px',
		height:		this.params.boxHeight+'px',
		left:		this.params.cornerWidth+'px',
		top:		'0px',
		background:	'url('+this.params.skinPath+'bg_line.gif) left center repeat-x'
	}));
	this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.cornerWidth+'px',
		height:		this.params.boxHeight+'px',
		left		:this.params.boxWidth-this.params.cornerWidth+'px',
		top:		'0px',
		background:	'url('+this.params.skinPath+'bg_rcorner.gif) left center no-repeat'
	}));
	
	this.marker=this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.markerWidth+'px',
		height:		this.params.markerHeight+'px',
		left:		this.params.cornerWidth+'px',
		top:		0-parseInt((this.params.markerHeight-this.params.boxHeight)/2)+'px',
		background:	'url('+this.params.skinPath+'bg_marker.gif) left top no-repeat'
	}));
	this.marker.parent=this;
	this.marker.mousex=0;
	try{
		this.marker.style.cursor='url('+this.params.cursorsPath+'cursor_hand.cur), e-resize'
	}catch(err){}
	
	//-------------------------- methods ---------------------------
	
	this._trackMouse=function(e){
		var boxPos=Extensions.getPos(this.box);
		var mousePos=Extensions.getEventPos(e);
		
		var minX=this.params.cornerWidth;
		var maxX=this.params.boxWidth-this.params.cornerWidth-this.params.markerWidth;
		var x=mousePos.x-boxPos.x-this.marker.mousex;
		
		if((x<minX && this.value==0) || (x>maxX && this.value==1))
			return;
		
		if(x<minX)
			x=minX;
		if(x>maxX)
			x=maxX;
			
		this.value=Math.round((x-minX)/(maxX-minX)*100)/100;
		this.onChange(this.value);
			
		this.marker.style.left=x+'px';
	}
	
	this.setValue=function(val){
		var val=parseFloat(val);
		if(val>1)
			val=1;
		if (val<0)
			val=0;
		
		this.value=val;
			
		var boxPos=Extensions.getPos(this.box);
		
		var minX=this.params.cornerWidth;
		var maxX=this.params.boxWidth-this.params.cornerWidth-this.params.markerWidth;
		var x=minX=parseInt((maxX-minX)*val);
		this.marker.style.left=x+'px';
	}
	//-------------------------- behavior -------------------------
	
	this.marker.onmousedown=function(e){
		var markerPos=Extensions.getPos(this);
		var mousePos=Extensions.getEventPos(e);
		
		this.parent.onStart();
		
		this.mousex=mousePos.x-markerPos.x
		
		try{
			this.parent.marker.style.cursor='url('+this.parent.params.cursorsPath+'cursor_handhold.cur), e-resize'
		}catch(err){}
		
		window.jssl_activeSlider=this.parent;
		this.parent.defaultMousemoveHandler=document.onmousemove;
		this.parent.defaultMouseupHandler=document.onmouseup;
		
		document.onmouseup=function(){
			jssl_activeSlider.onStop();
			document.onmouseup=jssl_activeSlider.defaultMouseupHandler;
			document.onmousemove=jssl_activeSlider.defaultMousemoveHandler;
			try{
				jssl_activeSlider.marker.style.cursor='url('+jssl_activeSlider.params.cursorsPath+'cursor_hand.cur), e-resize'
			}catch(err){}
		}
		
		document.onmousemove=function(e){
			jssl_activeSlider._trackMouse(e);
			return false;
		}
		
		return false;
	}
	
	this.marker.onmouseup=function(){
		try{
			this.style.cursor='url('+this.parent.params.cursorsPath+'cursor_hand.cur), e-resize'
		}catch(err){}
		document.onmousemove=this.parent.defaultMousemoveHandler;
	}
}


//--------------------------- JSCSlider.class.js --------------------------

function JSCSlider(initParams){
	/*
	holderId
	holder
	x
	y
	radius
	markerWidth
	markerHeight
	skinPath
	*/

	if(!document.createElement) //check DOM
	return;

	try{
		document.captureEvents(Event.MOUSEMOVE);
	}catch(err){}


	//------------ initialization

	this.params=initParams;
	this.value=0;

	this.onChange=function(degrees){}
	this.onStart=function(){}
	this.onStop=function(){}

	//------------ create objects

	if(typeof(this.params.holder)!='undefined'){
		this.holder=this.params.holder;
	}
	if(document.getElementById(this.params.holderId)){
		this.holder=document.getElementById(this.params.holderId);
	}

	if(!this.holder){
		this.box=document.getElementsByTagName('body')[0].appendChild(Extensions.createElement('div',{
			position:	'absolute',
			width:		this.params.radius*2+'px',
			height:		this.params.radius*2+'px',
			left:		this.params.x+'px',
			top:		this.params.y+'px',
			overflow:	'visible'
		}));
	}else{
		if(typeof(this.params.x)!='undefined' && typeof(this.params.y)!='undefined'){
			this.box=this.holder.appendChild(Extensions.createElement('div',{
				position:	'relative',
				width:		this.params.radius*2+'px',
				height:		this.params.radius*2+'px',
				left:		this.params.x+'px',
				top:		this.params.y+'px',
				overflow:	'visible'
			}));
		}else{
			this.box=this.holder.appendChild(Extensions.createElement('div',{
				position:	'relative',
				width:		this.params.radius*2+'px',
				height:		this.params.radius*2+'px',
				overflow:	'visible'
			}));
		}
	}

	this.bg=this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.radius*2+'px',
		height:		this.params.radius*2+'px',
		background:	'url('+this.params.skinPath+'bg_canvas.png) left top no-repeat'
	}));
	if(!Extensions.supportPNG24){
		this.bg.style.background='none';
		this.bg.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='"+this.params.skinPath+"bg_canvas.png')";
	}

	var pos=Extensions.getPos(this.box);
	this.params.x=pos.x;
	this.params.x=pos.y;

	this.marker=this.box.appendChild(Extensions.createElement('div',{
		position:	'absolute',
		width:		this.params.markerWidth+'px',
		height:		this.params.markerHeight+'px',
		left:		0+'px',
		top:		0+'px',
		background:	'url('+this.params.skinPath+'bg_marker.png) left top no-repeat'
	}));
	if(!Extensions.supportPNG24){
		this.marker.style.background='none';
		this.marker.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='"+this.params.skinPath+"bg_marker.png')";
	}
	this.marker._width=this.params.markerWidth;
	this.marker._height=this.params.markerHeight;
	this.marker.parent=this;
	this.marker.mousex=0;
	try{
		this.marker.style.cursor='url('+this.params.cursorsPath+'cursor_hand.cur), move'
	}catch(err){}
	

	//-------------------------- methods ---------------------------

	this._trackMouse=function(e){
		var boxPos=Extensions.getPos(this.box);
		var mousePos=Extensions.getEventPos(e);

		var x=mousePos.x-boxPos.x-this.params.radius;
		var y=mousePos.y-boxPos.y-this.params.radius;

		var radians=Math.atan(y/x);

		var degrees=radians/Math.PI*180;
		if(degrees<0)
			degrees+=180;
		if(y<0)
			degrees+=180;
		degrees=Math.round(degrees);

		var markerX=Math.round(Math.cos(radians)*(this.params.radius-3));
		var markerY=Math.round(Math.sin(radians)*(this.params.radius-3));

		if(x<0){
			markerX=this.params.radius-markerX;
			markerY=this.params.radius-markerY;
		}else{
			markerX=this.params.radius+markerX;
			markerY=this.params.radius+markerY;
		}
		this.marker.style.left=markerX-Math.round(this.marker._width/2)+'px';
		this.marker.style.top=markerY-Math.round(this.marker._height/2)+'px';

		this.marker._x=markerX;
		this.marker._y=markerY;

		this.value=degrees;
		this.onChange(degrees);
	}


	this.setValue=function(degrees){
		var radians=Math.PI*(360-degrees)/180;

		var markerX=this.params.radius+Math.round(Math.cos(radians)*(this.params.radius-3));
		var markerY=this.params.radius-Math.round(Math.sin(radians)*(this.params.radius-3));

		this.marker.style.left=markerX-Math.round(this.marker._width/2)+'px';
		this.marker.style.top=markerY-Math.round(this.marker._height/2)+'px';

		this.marker._x=markerX;
		this.marker._y=markerY;

		this.value=degrees;
	},

	this.getValue=function(){
		return this.value;
	}
	//-------------------------- behavior -------------------------

	this.marker.onmousedown=function(e){
		this.parent.onStart();
		try{
			this.parent.marker.style.cursor='url('+this.parent.params.cursorsPath+'cursor_handhold.cur), e-resize'
		}catch(err){}

		window.jssl_activeSlider=this.parent;
		this.parent.defaultMousemoveHandler=document.onmousemove;
		this.parent.defaultMouseupHandler=document.onmouseup;

		document.onmouseup=function(){
			jssl_activeSlider.onStop();
			document.onmouseup=jssl_activeSlider.defaultMouseupHandler;
			document.onmousemove=jssl_activeSlider.defaultMousemoveHandler;
			try{
				jssl_activeSlider.marker.style.cursor='url('+jssl_activeSlider.params.cursorsPath+'cursor_hand.cur), e-resize'
			}catch(err){}
		}

		document.onmousemove=function(e){
			jssl_activeSlider._trackMouse(e);
			return false;
		}

		return false;
	}

	this.marker.onmouseup=function(){
		try{
			this.style.cursor='url('+this.parent.params.cursorsPath+'cursor_hand.cur), e-resize'
		}catch(err){}
		document.onmousemove=this.parent.defaultMousemoveHandler;
	}

	//------------------------ initialization ----------------------

	if(typeof(this.params.value)!='undefined'){
		this.setValue(parseInt(this.params.value));
	}
}


//--------------------------- ControlTabs.js --------------------------

var ControlTabs={
	/*
	sample configuration
	{
	colors:'Colors',
	canvas:'Canvas',
	image:'Image',
	rotate:'Rotate'
	}
	*/
	tabs: 	{},

	init:	function(tabs, activeTab){
		this.tabs=tabs;
		this.select(activeTab);
	},

	active: 'colors',

	select: function(tabName){

		var activeTab=document.getElementById('tab_'+this.active);
		var selectedTab=document.getElementById('tab_'+tabName);

		activeTab.innerHTML='<a href="#" onclick="ControlTabs.select(\''+this.active+'\'); return false;"><ins>'+this.tabs[this.active]+'</ins></a>';
		activeTab.className=String(activeTab.className).replace(/\s*active/i,'');

		selectedTab.innerHTML='<span><ins>'+this.tabs[tabName]+'</ins></span>';
		selectedTab.className+=' active';

		document.getElementById('tabcontent_'+this.active).style.display='none';
		document.getElementById('tabcontent_'+tabName).style.display='block';

		this.active=tabName;
		try{
			ControlSliders.hideSliders();
		}catch(err){}
	}
}

//--------------------------- ControlColors.js --------------------------

var ControlColors={
	/*
	sample configuration
	{
		skinPath:'/images/',
		holder:'cpHolder',
		color:'#2c672e'
	}
	*/
	
	picker:null,
	
	activeSampleId:'',
	activeField:null,
	activeSample:null,
	
	init: function(params, activeSampleId){
		this.picker=new JSColorPicker(params);
		
		this.selectSample(activeSampleId);
		
		this.picker.onChange=function(color){
			ControlColors.activeField.value=color;
			ControlColors.activeSample.style.backgroundColor='#'+color;
			ControlParams.updateParam(ControlColors.activeSampleId, color);
		}
	},
	
	initSample:function(sampleId,color){
		var color=String(color).replace('#','');
		var fieldElement=document.getElementById(sampleId+'Val');
		
		document.getElementById(sampleId+'Sample').style.backgroundColor='#'+color;
		fieldElement.value=color;
		
		fieldElement.onfocus=function(){
			ControlColors.activeField=this;
			//ControlColors.selectSample(String(this.id).replace('Val',''));
		};	
		fieldElement.onblur=function(){
			ControlColors.readValue(this);
		};
		fieldElement.onkeydown=function(e){
			var keycode=0;
			if (window.event) 
				keycode = window.event.keyCode;
			else if (e) 
				keycode = e.which;
			if(keycode==13 || keycode==9){
				ControlColors.readValue(this);
				return false;
			}
		}
	},
	
	selectSample: function (sampleId){
		var sample=document.getElementById(sampleId+'Sample');
		Extensions.addCssClass(sample,'active');
		
		if(this.activeSample)
			Extensions.removeCssClass(this.activeSample,'active');
		
		this.activeSampleId=sampleId;
		this.activeSample=sample;
		this.activeField=document.getElementById(sampleId+'Val');
		
		if(typeof(ControlParams.fields)!='undefined')
			this.picker.setColor(ControlParams.fields[this.activeSampleId].value);
	},
	
	readValue:function(fieldElement){
		var val=String(fieldElement.value);
		if(!val.match(/[\da-f]{6}/i)){
			Extensions.addCssClass(fieldElement, 'invalidValue');
			return false;
		}

		Extensions.removeCssClass(fieldElement, 'invalidValue');
		
		this.activeSample.style.backgroundColor='#'+val;
		this.picker.setColor(val)
	},
	
	set:function(colors){
		for(var sampleId in colors){
			var color=String(colors[sampleId]).replace('#','');
			document.getElementById(sampleId+'Sample').style.backgroundColor='#'+color;
			document.getElementById(sampleId+'Val').value=color;
			ControlParams.updateParam(sampleId, color);
		}
		if(typeof(colors[this.activeSampleId])!='undefined')
			this.picker.setColor(colors[this.activeSampleId]);
	}
}

//--------------------------- ControlSliders.js --------------------------

var ControlSliders={
	
	/*
	Sample configuration
	{
		skinPath:'/images/live-fields/',
		cursorsPath:'/images/cursors/',
		holderWidth:200,
		holderHeight:30,
		boxWidth:179,
		boxHeight:10,
		cornerWidth:1,
		markerWidth:30,
		markerHeight:12,
		x:10,
		y:13
	}
	*/
	
	init:function(params, filters){
		LiveFields.init(params, filters);
		
		LiveFields.onInvalidValue=function(fieldElement){
			Extensions.addCssClass(fieldElement, 'invalidValue');
		}
		
		LiveFields.onValidValue=function(fieldElement){
			Extensions.removeCssClass(fieldElement, 'invalidValue');
		}
		
		LiveFields.onChange=function(paramName, value){
			ControlParams.updateParam(paramName, value);
		}
	},
	
	set:function(paramName,paramValue){
		LiveFields.set(paramName,paramValue);
	},
	
	hideSliders:function(){
		LiveFields.hideSlider();
	},
	
	setRel:function(primaryFieldId, dependedFieldId){
		LiveFields.setRel(primaryFieldId, dependedFieldId);
	},
	
	unsetRel:function(primaryFieldId){
		LiveFields.unsetRel(primaryFieldId);
	}
}


//--------------------------- ControlRels.js --------------------------

var ControlRels={
	switchers:{},
	
	initSwitcher:function(switcherId, primaryFieldId, dependedFieldId, isOn){
		this.switchers[switcherId]={
			primaryFieldId:		primaryFieldId,
			dependedFieldId:	dependedFieldId,
			status: 			!isOn
		}
		
		this.switchStatus(switcherId)
	},
	
	switchStatus:function(switcherId){
		if(typeof(this.switchers[switcherId])!='undefined'){
			var switcher=this.switchers[switcherId];
			var switcherElement=document.getElementById(switcherId);
			
			if(switcher.status){
				ControlSliders.unsetRel(switcher.primaryFieldId);
				ControlSliders.unsetRel(switcher.dependedFieldId);
				
				if(String(switcherElement.className).match(/\s?propFlagActive/i)){
					switcherElement.className=String(switcherElement.className).replace(/\s?propFlagActive/i,'');
				}
			}else{
				ControlSliders.setRel(switcher.primaryFieldId, switcher.dependedFieldId);
				ControlSliders.setRel(switcher.dependedFieldId, switcher.primaryFieldId);
				
				if(!String(switcherElement.className).match(/\s?propFlagActive/i))
					switcherElement.className=switcherElement.className+' propFlagActive';
			}
			
			this.switchers[switcherId].status=!this.switchers[switcherId].status;
		}
	}
}

//--------------------------- LiveFields.class.js --------------------------

var LiveFields={
	
	params:{},
	holder:false,
	filters:{},
	activeField:'',
	
	hideDelay:2000,
	fadeDelay:50,
	fadeStep:10,
	fadeTimer:null,
	fadeAllowed:true,
	
	_activateFadeTimer:function(){
		this.fadeAllowed=true;
		clearTimeout(this.fadeTimer);
		this.holder.setOpacity(100);
		this.fadeTimer=setTimeout(function(){
			LiveFields.fadeOutSlider();
		},this.hideDelay);
	},
	
	_fixValue:function(){
		var filter=this.filters[this.activeField.id];
		var value=parseFloat(this.activeField.value);
		if(isNaN(value)){
			this.onInvalidValue(this.activeField);
			return false;
		}

		if(value>filter.max)
			value=filter.max;
		if(value<filter.min)
			value=filter.min;
		this.activeField.value=value;
		
		this.onValidValue(this.activeField);
		return value;
	},
	
	init:function(params, filters){
		if(this.holder)
			return;
		if(typeof(document.getElementsByTagName)=='undefined'){
			alert("Browser doesn't support LiveFields feature")
			return false;
		}
		
		this.params=params;
		
		if(typeof(filters)!='undefined')
			this.filters=filters;
		
		for(var fieldId in this.filters){
			if(field=document.getElementById(fieldId)){
				field.onclick=function(){
					LiveFields.showSlider(this)
				};
				field.onblur=function(){
					LiveFields.readValue(this);
				};
				field.onkeydown=function(e){
					var keycode=0;
					if (window.event) 
						keycode = window.event.keyCode;
					else if (e) 
						keycode = e.which;
					if(keycode==13 || keycode==9)
						LiveFields.readValue(this);
				}
				this.filters[fieldId].depended=false;
			}
		}
		
		this.holder=document.getElementsByTagName('body')[0].appendChild(
			Extensions.createElement('div',{
				position:	'absolute',
				top:		100+'px',
				left:		100+'px',
				background:	'url('+this.params.skinPath+'bg_holder.gif'+') 0 0 no-repeat',
				width:		this.params.holderWidth+'px',
				height:		this.params.holderHeight+'px',
				display:	'none'
			})
		);
		this.holder.setOpacity=Extensions.setOpacity;
		this.holder.getOpacity=Extensions.getOpacity;
		
		this.params.holder=this.holder;
		this.slider = new JSHSlider(params);
		this.slider.onChange=function(perc){
			LiveFields._activateFadeTimer();			
			LiveFields.setValue(perc);
		}
	},
	
	showSlider:function(fieldElement){
		var pos=Extensions.getPos(fieldElement);
		this.holder.style.left=parseInt(pos.x-(this.params.holderWidth-fieldElement.offsetWidth)/2)+'px';
		this.holder.style.top=parseInt(pos.y+fieldElement.offsetHeight)+'px';
		
		this.fadeAllowed=false;
		clearTimeout(this.fadeTimer);
		this.holder.setOpacity(100);
		this.holder.style.display='block';
		
		this.activeField=fieldElement;
		this.readValue(fieldElement);
		
		this.onChange(this.activeField.id, this.activeField.value);
	},
	
	hideSlider:function(fieldElement){
		this.holder.style.display='none';
		this.holder.setOpacity(100);
	},
	
	fadeOutSlider:function(){
		if(!this.fadeAllowed)
			return;
		
		var opacity=this.holder.getOpacity()
		if(opacity>0){
			this.holder.setOpacity(opacity-this.fadeStep);
			this.fadeTimer=setTimeout(function(){
				LiveFields.fadeOutSlider();
			},this.fadeDelay);
		}else{
			clearTimeout(this.fadeTimer);
			this.hideSlider();
		}
						
	},
	
	setValue:function(perc){
		var range=this.filters[this.activeField.id]
		if(range){
			if(typeof(range.precision)!='number' && range.precision!=0){
				var value=parseInt(range.min+(range.max-range.min)*perc);
			}else{
				var value=parseInt(range.min+(range.max-range.min)*perc*Math.pow(10,range.precision))/Math.pow(10,range.precision);
			}
		}
		
		this.activeField.value=value;
		this.onValidValue(this.activeField);
		this.calculateDepended();
		this.onChange(this.activeField.id,value);
	},
	
	set:function(paramName,paramValue){
		if(typeof(document.getElementById(paramName))=='undefined')
			return false;
		var field=document.getElementById(paramName)

		if(typeof(this.filters[paramName])=='undefined')
			return false;
			
		var range=this.filters[paramName]
		if(paramValue>range.max)
			paramValue=range.max;
		if(paramValue<range.min)
			paramValue=range.min;
			
		field.value=paramValue;
		this.onChange(paramName, paramValue);
	},
	
	calculateDepended:function(){
		if(this.filters[this.activeField.id].depended){
			var dependedFieldId=this.filters[this.activeField.id].depended;
			var dependedField=document.getElementById(dependedFieldId);
			var range=this.filters[dependedFieldId];
			var relFactor=this.filters[dependedFieldId].relFactor;
			var value=this.activeField.value;
			
			var dependedVal=parseFloat(dependedField.value);
			dependedVal=value*relFactor;
			
			var wasCorrected=false;
			if(dependedVal<range.min){
				dependedVal=range.min;
				wasCorrected=true;
			}
			if(dependedVal>range.max){
				dependedVal=range.max;
				wasCorrected=true;
			}			
			
			if(typeof(range.precision)!='number' && range.precision!=0){
				dependedField.value=parseInt(dependedVal);
			}else{
				dependedField.value=parseInt(dependedVal*Math.pow(10,range.precision))/Math.pow(10,range.precision);
			}
			
			if(wasCorrected)
				return;
			
			this.onValidValue(dependedField);
			this.onChange(dependedFieldId,dependedVal);
		}
	},
	
	readValue:function(fieldElement){
		var value=this._fixValue();
		
		if(value){
			var range=this.filters[this.activeField.id];
			this.slider.setValue((value-range.min)/(range.max-range.min));
			
			LiveFields._activateFadeTimer();
			
			LiveFields.calculateDepended();
			LiveFields.onChange(this.activeField.id, value);
		}
	},
	
	//----------------- relations handling ----------------------
	
	setRel:function(primaryFieldId, dependedFieldId){
		if(typeof(this.filters[primaryFieldId])!='undefined' && typeof(this.filters[dependedFieldId])!='undefined'){
			this.filters[primaryFieldId].depended=dependedFieldId;
			this.filters[dependedFieldId].relFactor=parseFloat(document.getElementById(dependedFieldId).value)/parseFloat(document.getElementById(primaryFieldId).value)
		}
	},
	
	unsetRel:function(primaryFieldId){
		if(typeof(this.filters[primaryFieldId])!='undefined')
			this.filters[primaryFieldId].depended=false;
	},
	
	//--------------------- events ------------------------------
	
	onChange:function(paramName, value){},
	
	onInvalidValue:function(fieldElement){},
	
	onValidValue:function(fieldElement){}
}

//--------------------------- ControlAngle.js --------------------------

var ControlAngle={
	params:{},
	slider:null,

	/*
	sample params
	{
	x:200,
	y:200,
	radius:104,
	markerWidth:30,
	markerHeight:30,
	skinPath:'/images/cslider/',
	cursorsPath:'/images/cursors/'
	}
	*/

	init:function(params){
		this.params=params;
		if(!this.params.fieldsDistance)
		this.params.fieldsDistance=5;

		this.slider=new JSCSlider(params);
		this.slider.onChange=function(degrees){
			ControlAngle.showValue(degrees);
			ControlParams.updateParam('angle',degrees);
		}

		this.field=this.slider.box.appendChild(Extensions.createElement('input',{},params.fieldClassName));
		this.field.type='text';
		this.field.maxLength=3;
		this.field.value=this.slider.getValue();
		
		this.field._width=0;
		this.field._height=0;

		this.field.style.position='absolute';

		this.field.onblur=function(){
			ControlAngle.readValue();
		};
		this.field.onkeydown=function(e){
			var keycode=0;
			if (window.event) 
				keycode = window.event.keyCode;
			else if (e) 
				keycode = e.which;
			if(keycode==13 || keycode==9)
				ControlAngle.readValue(this);
		}
		
		
		this.showValue(this.slider.getValue());
	},

	showValue: function(degrees){
		if(this.field._width==0 || this.field._height==0)
			this._calcGeometry();			
		
		this.field.value=degrees;

		var fieldX=Math.round(this.slider.marker._x*this.fieldXFactor-this.fieldXDiff);
		var fieldY=Math.round(this.slider.marker._y*this.fieldYFactor-this.fieldYDiff);

		this.field.style.left=fieldX+'px';
		this.field.style.top=fieldY+'px';
	},

	setValue:function(val){
		if(val>360)
			val=360;
		if(val<0)
			val=0;
		this.slider.setValue(val);
		this.showValue(val);
		ControlParams.updateParam('angle',val);
	},

	getValue:function(){
		return this.slider.getValue();
	},

	readValue:function(){
		var val=parseInt(this.field.value);
		if(isNaN(val)){
			Extensions.addCssClass(this.field, 'invalidValue');
			return false;
		}

		Extensions.removeCssClass(this.field, 'invalidValue');

		if (val>=360)
			val=val % 360;
		if(val<0)
			val=0;

		this.field.value=val;
		this.setValue(val);
	},
	
	_calcGeometry:function(){
		this.field._width=parseInt(this.field.offsetWidth);
		this.field._height=parseInt(this.field.offsetHeight);
		
		//Util.trace('('+this.params.radius+'+'+this.field._width/2+'+'+this.params.fieldsDistance+'+'+this.slider.marker._width/2+')/'+this.params.radius)
		this.fieldXFactor=(this.params.radius+this.field._width/2+this.params.fieldsDistance+this.slider.marker._width/2)/this.params.radius;
		this.fieldYFactor=(this.params.radius+this.field._height/2+this.params.fieldsDistance+this.slider.marker._height/2)/this.params.radius;

		//Util.trace(this.field._width/2+'+'+this.params.fieldsDistance+'+'+this.slider.marker._width/2);
		this.fieldXDiff=Math.round(this.field._width+this.params.fieldsDistance+this.slider.marker._width/2);
		this.fieldYDiff=Math.round(this.field._height+this.params.fieldsDistance+this.slider.marker._height/2);
	}
}

//--------------------------- ControlUpload.js --------------------------

var ControlUpload={
	
	handlers:{},
	progressbar:null,
	compiledImageURL:'',
	handlerURL:'',
	lastRequestedURL:'',
	
	init:function(handlers,progressbarId){
		this.handlers=handlers;
		this.progressbar=document.getElementById(progressbarId);
		
		try{
			this.ajaxHandler=new XMLHttpRequest();
		}catch (e){
			try{
				this.ajaxHandler=new ActiveXObject("Msxml2.XMLHTTP");
			}catch (e){
				try{
					this.ajaxHandler=new ActiveXObject("Microsoft.XMLHTTP");
				}catch (e){
					this._reportError('Sorry, but seems like your browser can not perform AJAX requests')
				}
			}
		}
	},
	
	request:function(action){
		var queryString='';
		
		var params=ControlParams.getAllParams();
		for(var property in params){
			queryString+='&p['+property+']='+encodeURI(params[property]);
		}
		
		queryString='?action='+action+queryString;
		
		var handler=this.handlers[action];
		if(handler.ajax){
			this._showBar();
			this.lastRequestedURL=this.handlerURL+queryString;
			this.ajaxHandler.open("GET",handler.URL+queryString,true);
			this.ajaxHandler.onreadystatechange=function(){
				ControlUpload._receiveResponse();
			}
			this.ajaxHandler.send(null);
		}else{
			var frame=document.getElementById("communityFrame");
			if(typeof(frame)=='undefined' || !frame){
				top.document.location=handler.URL+queryString;
			}else{
				frame.src=handler.URL+queryString;
			}
		}
	},
	
	handleResponse:function(response){
		switch(response['action']){
			case 'apply':
				this.compiledImage=response.file;
				var buf = new Image();
				this.compiledImageURL=response.path+response.file+'.jpg';
				buf.src=this.compiledImageURL;
				buf.onload=function(){
					ControlUpload._applyBgImage();
				}
				break;
			case 'download':
				this.compiledImage=response.file;
				document.location='/download.php?file='+response.file;
				this._hideBar();
				break;
		}
	},
	
	_receiveResponse:function(){
		//Util.trace('>'+this.ajaxHandler.readyState)
		if(this.ajaxHandler.readyState==4){
			if(this.ajaxHandler.status==200){
				var mask=/success/im;
				if(this.ajaxHandler.responseText.match(mask)){
					var responseIsValid=true;
					try{
						eval('var response='+this.ajaxHandler.responseText);
					}catch(err){
						this._reportError('Inavalid response (0)');
						this._hideBar();
						responseIsValid=false
					}
					if(responseIsValid){
						if(response.success){
							//Util.printObj(response);
							ControlUpload.handleResponse(response);
						}else{
							this._reportError('Failed to perform action');
							this._hideBar();
						}
					}
				}else{
					this._reportError('Inavalid response (1)');
					this._hideBar();
				}
			}else{
				this._reportError('server error: '+this.ajaxHandler.status)
				this._hideBar();
			}
		}
	},
	
	_reportError:function(message){
		Util.trace(this.lastRequestedURL);
		Util.trace(message);
	},
	
	_applyBgImage:function(){
		document.getElementsByTagName('body')[0].style.background='url('+this.compiledImageURL+')';
		this._hideBar();
	},
	
	_showBar:function(){
		this.progressbar.className='upload';
	},
	
	_hideBar:function(){
		this.progressbar.className='';
	}
}

//--------------------------- ControlLoad.js --------------------------

var ControlLoad={
	
	progressbar:null,
	ajaxHandler:null,
	lastRequestedConfId:'',
	handlerURL:'',
	
	init:function(handlerURL, progressbarId){
		this.progressbar=document.getElementById(progressbarId);
		this.handlerURL=handlerURL;
		
		try{
			this.ajaxHandler=new XMLHttpRequest();
		}catch (e){
			try{
				this.ajaxHandler=new ActiveXObject("Msxml2.XMLHTTP");
			}catch (e){
				try{
					this.ajaxHandler=new ActiveXObject("Microsoft.XMLHTTP");
				}catch (e){
					this._reportError('Sorry, but seems like your browser can not perform AJAX requests')
				}
			}
		}
	},
	
	loadConf:function(confId){
		var queryString='';
		
		/*if(confId==this.lastRequestedConfId)
			return;*/
			
		queryString='?action=load&confId='+confId;
		
		this._showBar();
		this.lastRequestedURL=this.handlerURL+queryString;
		this.ajaxHandler.open("GET",this.handlerURL+queryString,true);
		this.ajaxHandler.onreadystatechange=function(){
			ControlLoad._receiveResponse();
		}
		this.ajaxHandler.send(null);
		
	},
	
	handleResponse:function(response){
		document.getElementsByTagName('body')[0].style.background='url('+response.params.file+')';
		
		/*Util.clearDebug();
		Util.printObj(response.params);*/
		
		//colors
		ControlColors.set({
			fgColor:	response.params.fgColor,
			bgColor:	response.params.bgColor
		});
		
		//canvas width and height
		ControlSliders.setRel('canvasWidth', 'controlHeight');
		ControlSliders.setRel('controlHeight', 'canvasWidth');
		ControlSliders.set('canvasWidth',response.params.canvasWidth)
		ControlSliders.set('canvasHeight',response.params.canvasHeight)
				
		//texture
		ControlParams.updateParam('texture',response.params.texture);
		ControlParams.updateParam('textureOpacity',response.params.textureOpacity);
		
		//image
		ControlParams.updateParam('image',response.params.image);
		ControlSliders.set('imageOpacity',response.params.imageOpacity);
		ControlSliders.set('imageScale',response.params.imageScale);
		ControlParams.updateParam('angle',response.params.angle);
		ControlAngle.setValue(response.params.angle);
		ControlLoc.switchTo(response.params.imagesLocation);
		
		this.lastRequestedConfId=response.params.patternId;
		this._hideBar();
	},
	
	_receiveResponse:function(){
		//Util.trace('>'+this.ajaxHandler.readyState)
		if(this.ajaxHandler.readyState==4){
			if(this.ajaxHandler.status==200){
				var mask=/success/im;
				if(this.ajaxHandler.responseText.match(mask)){
					var responseIsValid=true;
					try{
						eval('var response='+this.ajaxHandler.responseText);
					}catch(err){
						this._reportError('Inavalid response (0)');
						this._hideBar();
						responseIsValid=false
					}
					if(responseIsValid){
						if(response.success){
							ControlLoad.handleResponse(response);
						}else{
							this._reportError('Failed to perform action');
							this._hideBar();
						}
					}
				}else{
					this._reportError('Inavalid response (1)');
					this._hideBar();
				}
			}else{
				this._reportError('server error: '+this.ajaxHandler.status)
				this._hideBar();
			}
		}
	},
	
	_reportError:function(message){
		Util.trace(this.lastRequestedURL);
		Util.trace(message);
	},
	
	_showBar:function(){
		this.progressbar.className='download';
	},
	
	_hideBar:function(){
		this.progressbar.className='';
	}
}

//--------------------------- ControlParams.js --------------------------

var ControlParams={
	syncCavasSize:true,
	screen:null,
	
	/*
	Sample configuration
	{
		canvasWidth:	{min:50,	max:190,	value:150},
		canvasHeight:	{min:50,	max:190,	value:80},
		textureOpacity:	{min:0,		max:100,	value:20},
		
		imageScale:		{min:5,		max:100,	value:50},
		imageOpacity:	{min:0,		max:100,	value:50},
		
		fgColor:		{value: 	'ffffff'},
		bgColor:		{value: 	'990000'}
	}
	*/
	
	
	init:function(fields){
		this.screen=document.getElementById(navigator.appVersion.match(/MSIE/i)?'screenObjIE':'screenObj')
		this.fields=fields;
		for(var paramName in this.fields){
			this.setParam(paramName, this.fields[paramName].value);
		}
	},

	renderParam:function(paramName,value){
		//Util.ctrace(paramName);
		setTimeout(function(){
			try{	
				ControlParams.screen['set_'+paramName](value);
			}catch(err){
				Util.trace('err: '+paramName+' = '+value+' ('+err+')')
			}
		},1);
	},
	
	updateParam:function(paramName,value){
		this.fields[paramName].value=value;
		if(!designerIsClosed)
			this.renderParam(paramName, this.fields[paramName].value)
	},
	
	getAllParams:function(){
		var ret={};
		for(var property in this.fields){
			ret[property]=this.fields[property].value;
		}
		return ret;
	},
	
	getParam:function(paramName){
		var element=document.getElementById(paramName);
		if(element)
			return element.value;
		else
			return this.fields[paramName].value;
	},
	
	setParam:function(paramName, value){
		var element=document.getElementById(paramName);
		if(element)
			element.value=value;
	},
	
	renderAllParams:function(){
		this.screen=document.getElementById(navigator.appVersion.match(/MSIE/i)?'screenObjIE':'screenObj')
		for(var paramName in this.fields){
			this.renderParam(paramName, this.fields[paramName].value)
		}
	}
}

//--------------------------- ControlWindow.js --------------------------

var ControlWindow={
	
	opened:			true,
	pane:			null,
	closedCssClass:	'closed',
	switcher:		null,
	titleOpen:		'open',	
	titleClose:		'close',	
	
	init:function(paneId,closedCssClass,switcherId,titleOpen,titleClose,opened){
		this.opened=opened;
		this.pane=document.getElementById(paneId);
		this.closedCssClass=closedCssClass;
		this.switcher=document.getElementById(switcherId);
		this.titleOpen=titleOpen;
		this.titleClose=titleClose;
		
		if(this.opened)
			this.open();
		else
			this.close();
	},
	
	open:function(){
		this.opened=true;
		this.switcher.innerHTML=this.titleOpen;
		Extensions.removeCssClass(this.pane, this.closedCssClass);
		designerIsClosed=false;
		Extensions.scrollToTop();
	},
	
	close:function(){
		this.opened=false;
		this.switcher.innerHTML=this.titleClose;
		Extensions.addCssClass(this.pane, this.closedCssClass);
		designerIsClosed=true;
		Extensions.scrollToTop();
	},
	
	switchMode:function(){
		if(!this.opened)
			this.open();
		else
			this.close();
	}
}

//--------------------------- ControlLoc.js --------------------------

var ControlLoc={
	selectedMode:'locmode',
	cssClassPrefix:'',
	modes:{},
	switcher:null,
	
	init:function(switcherId,cssClassPrefix,modes,selectedMode){
		this.switcher=document.getElementById(switcherId);
		this.cssClassPrefix=cssClassPrefix;
		this.modes=modes;
		
		this.switchTo(selectedMode);
	},
	
	switchTo:function(mode){
		Extensions.removeCssClass(this.switcher, this.cssClassPrefix+this.selectedMode);
		Extensions.addCssClass(this.switcher, this.cssClassPrefix+mode);
		ControlParams.updateParam('imagesLocation',this.modes[mode]);
		this.selectedMode=mode;		
	}
}

//--------------------------- init-index.js --------------------------


function renderAllParams(){
	ControlParams.renderAllParams();
}

function ftrace(str,clear){
	if(typeof(clear)!='undefined')
		Util.clearDebug();
	Util.trace('flash:'+str);
}

var designerIsClosed=false;

function init(){
	
	Extensions.removeCssClass(document.getElementById("wrapper"),'invisible');
	Extensions.addCssClass(document.getElementById("loadingBar"),'invisible');
	
	//------------------------ init tabs -----------------------
	
	ControlTabs.init({
		colors:'Colors',
		canvas:'Canvas',
		image:'Image',
		rotate:'Rotate'
	},'image');
	
	//------------------- init color picker --------------------
	
	ControlColors.init({
		skinPath:'/images/',
		holder:'cpHolder',
		color:initialValues.fgColor.value
	},'fgColor');
	
	ControlColors.initSample('fgColor',initialValues.fgColor.value);
	ControlColors.initSample('bgColor',initialValues.bgColor.value);
	
	//------------------- init params syncer --------------------
	
	ControlParams.init(initialValues);
	
	//------------------- init params fields --------------------
	
	ControlSliders.init({
		skinPath:'/images/live-fields/',
		cursorsPath:'/images/cursors/',
		holderWidth:200,
		holderHeight:30,
		boxWidth:179,
		boxHeight:10,
		cornerWidth:1,
		markerWidth:30,
		markerHeight:12,
		x:10,
		y:13
	},initialValues);
	
	//------------------- init angle slider --------------------
	
	ControlAngle.init({
		holderId:'angleSlider',
		radius:104,
		markerWidth:30,
		markerHeight:30,
		skinPath:'/images/cslider/',
		cursorsPath:'/images/cursors/',
		fieldClassName:'paramsField',
		value:initialValues.angle.value
	});
	
	//-------------------- init relations -----------------------
	
	ControlRels.initSwitcher(
		'canvasPropFlag',
		'canvasWidth',
		'canvasHeight',
		true
	);
	
	//------------------- init upload controller ---------------
	
	ControlUpload.init(
		{
			apply:{
				ajax:	true,
				URL:	'/ajax-responder.php'
			},
			download:{
				ajax:	true,
				URL:	'/ajax-responder.php'
			},
			save:{
				ajax:	false,
				URL:	'/my-patterns.php'
			}
		},
		'progressbar'
	);
	
	//------------------- init upload controller ---------------
	
	ControlLoad.init('/ajax-responder.php','progressbar');
	
	//-------------------- init layout -----------------------

/*	
	ControlWindow.init(
		'wrapper',
		'closed',
		'wmodeSwitcherTitle',
		'Hide designer',
		'Show designer',
		true
	);
*/	
	//-------------------- init location modes -----------------------
	
	ControlLoc.init(
		'locModes',	
		'locmode_',
		{
			diagonal: 	'diagonal',
			straight:	'straight'
		},
		'diagonal'
	);
	
	//-----------------performing the magick :)-----------------
	
	setTimeout(renderAllParams,100)
}