var SpinColorApplet = function(el){
this.SCP = function(el)
{
	var el = $(el);
	this.hiddenFieldId;
	// setup style
	el.attr("style","font:13px arial,helvetica,clean,sans-serif;width:770px;height:157px;background-color:#ffffff;display:table;overflow:hidden;");
	// setup paths
	this.pathToPngs = "assets/";
	this.pathToStoneImages = "imgs/stones/";
	this.pathToGemStoneImages = "imgs/small/";
	var _jsonUrl = "gemfeed.txt";
	// callback events
	var onColorChange = function(v){request(v);}
	var onListRowMouseOver = function(v){_description.text.html(v[2]);_description.el.stop(true,true).fadeIn(500);}
	var onListRowMouseOut = function(v){_description.el.stop(true,true).fadeOut(500);}
	// color wheel
	var cw_el = $("<div style='position:absolute;'></div>");
	el.html(cw_el);
	var _cw=new ColorWheel();_cw.pathToPngs=this.pathToPngs;_cw.pathToStoneImages=this.pathToStoneImages;_cw.callback=function(v){onColorChange(v)};_cw.init(cw_el);
	// list
	var _list=new List();_list.path = this.pathToGemStoneImages;_list.onRowMouseOver=onListRowMouseOver;_list.onRowMouseOut=onListRowMouseOut;
	this.hiddenFieldId = _list.hf.get(0); 
	el.append(_list.el);
	// description
	var _description = new Description();el.append(_description.el);
	// request json 
	var request=function(v)
	{
		//$.getJSON("http://70.86.157.71/gem/gemfeed.mx"+"?c=r&s=r&m=5&callback=?", function(data) {
   		//	alert("asd");
		//});
		$.ajax({
			crossDomain:true,cache:false,type:"GET",data:{c:v,s:"r",m:"5"},url:_jsonUrl,dataType:"text",
			success:function(data){
				var listData = eval(data);
				_list.populate(listData);
											
			},
			error:function(e){}
		});
	}
	// 
	this.selectColor = function(v){_cw.changeColor(v);};
	this.selectGemstone = function(v){_list.hf.attr("value",v);};
	this.selectColor('o');
	this.selectGemstone(1);
};
var List = function()
{
	this.path;this.onRowMouseOver;this.onRowMouseOut;
	this.el = $("<form  style='position:absolute;left:200px;'></form");
	this.hf = $("<input type='hidden' name='id' value=''>");
	this.el.html(this.hf);
	this.populate = function(data){this.el.children().remove();for(var i=0;i<data.length;i++){this.createRow(data[i]);}}
	this.createRow = function(data)
	{
		var self = this;
		var input = $("<input type='radio' name='list' value='"+data[0]+"'/>").attr("style","float:left;");
		input.click(function(){self.hf.attr("value",$(this).attr("value"));});
		if(data[0]==this.hf.attr("value")) input.attr("checked","checked");
		var icon = $("<img src='"+this.path+data[3]+"' />").attr("style","float:left;");
		var name = $("<div style='width:20px'>"+data[1]+"</div>").attr("style","float:left;");
		var price = $("<div>$ "+data[4]+"</div>").attr("style","float:right;");
		var row = $("<div style='width:330px;height:20px;line-height:20px;background-color:#ffffff;margin:2px;padding:0px;display:table;overflow:hidden;'></div>");
		row.data("rowData",data);
		row.hover(function(){self.onRowMouseOver($(this).data("rowData"));},function(){self.onRowMouseOut();});
		row.html(input).append(icon).append(name).append(price);
		this.el.append(row);
	}
};
var Slider = function() {
	this.el=$("<div style='background:transparent url(assets/slider.png) 0 0 no-repeat;width:157px;height:157px;position:absolute;'></div>");
};
var StoneImage = function()
{
	this.callback;this.path;this.el=$("<div style='width:157px;height:157px;position:absolute;display:none;'></div>");
	var pngFixImg=$("<div name='pngFixImg' style='position:absolute;'></div>"),img=$("<img src='' style='position:absolute;'/>"),self=this;
	img.load(function(){if(typeof self.callback == 'function'){self.callback();}}).error(function(){});
	this.el.html(pngFixImg).append(img);this.load=function(fn){img.attr('src',this.path+fn);}
};
var Description = function()
{
	var style ='width:206px;height:145px;background-color:#ffffff;position:absolute;left:560px;overflow:hidden;padding:5px;display:none;'; 
	this.el = $("<div style="+style+"></div>");
	this.text = $("<span></span>");
	this.el.html(this.text);
};
var ColorWheel = function() {
	this.pathToPngs;this.pathToStoneImages;this.el;this.callback=function(){};
	var _angleList=[0,30,60,90,120,150,180,-150,-120,-90,-60,-30],_colorList=["o","y","l","g","a","b","p","w","k","r","d","c"],_pngs={o:"Orange",y:"Yellow",l:"LightGreen",g:"Green",a:"Aqua",b:"Blue",p:"Purple",w:"White",k:"Pink",r:"Red",d:"DarkOrange",c:"Brown"};
	var _points,_lag = 0.1,_spin=0,_lastSpin=0,_lastAngle,_lastColor,_wheel,_stone,timerId;
	this.init=function(v){
		var self=this;
		makePoints();
		_stone=new StoneImage();_stone.path=this.pathToStoneImages;_stone.callback=function(){self.onImageStoneLoad()}; 
		var slider=new Slider();slider.el.click(function(e){var mp={x:e.pageX-$(this).offset().left,y:e.pageY-$(this).offset().top};var cp=getClosestPoint(mp);prepareSpin(cp.index);});
		_wheel=new Wheel();_wheel.path=this.pathToPngs;_wheel.init();
		this.el=v;this.el.css({'width':157,'height':157,'background-color':'#ffffff'});this.el.html(_stone.el).append(_wheel.el).append(slider.el); 
	}
	var onSpinStop=function(){_stone.el.fadeOut(500,function(){_stone.load(_pngs[_lastColor]+".png");});};
	this.onImageStoneLoad = function(){if(typeof this.callback == 'function'){this.callback(_lastColor);};_stone.el.fadeIn(500);}
	this.changeColor = function(v){clearInterval(timerId);timerId=undefined;var i = findIndexByColor(v);prepareSpin(i);}
	var prepareSpin=function(index){if(timerId===undefined){_lastAngle=_angleList[index];_colorList=resolveColorList(_colorList[index]);_lastColor=_colorList[0];clearInterval(timerId);timerId=undefined;timerId=setInterval(function(){smoothSpin();},25);}};
	var smoothSpin=function(){var spin=(_spin-_lastAngle)*_lag;if(spin>0.05||spin<-0.05){_spin=_spin - spin;}else{clearInterval(timerId);timerId=undefined;_lastSpin+=_lastAngle;_spin=0;onSpinStop();}_wheel.rotate(-(_spin+_lastSpin));};
	var resolveColorList=function(color){var list=[],i=0,k=0;while(_colorList[i]!=color){i++;};while(k<_points.length){list.push(_colorList[i]);i++;k++;if(i>(_points.length-1))i=0;};return list;};
	var getClosestPoint=function(pt){var cp={},closest=findClosest(pt);cp.index=closest[0];cp.distance=closest[1];cp.point=_points[cp.index];return cp;};
	var findClosest=function(pt){var index=0,distance=10000,len=_points.length,i=0,p,sqr,y,x;while(i<len){p=_points[i];x=pt.x-p.x;y=pt.y-p.y;sqr=Math.sqrt(x*x+y*y);if(sqr<distance){index=i;distance=sqr;};i++;};return [index,distance];};
	var findIndexByColor=function(v){var i=0;while(_colorList[i]!=v){i++;};return i;};
	var findIndex=function (pt){var result=0,sqr_comp=10000,len=_points.length,i=0,p,sqr,x,y;while(i<len){p=_points[i];x=pt.x-p.x;y=pt.y-p.y;sqr=Math.sqrt(x*x+y*y);if(sqr<sqr_comp){result=i;sqr_comp=sqr;};i++}return result};
	var makePoints=function(){_points=[];for(i=0;i<360;i+=30){var rad=157/2;var angle=i*Math.PI/180;var x=rad+rad*Math.sin(angle);var y=rad+rad*-Math.cos(angle);_points.push({x:x,y:y});}};
};
var Wheel = function() {
	this.el;this.path;var supportedCSS,isIE,v,img,bgImg;
	this.init = function(){
		this.el = $("<div style='width:157px;height:157px;position:absolute;'></div>");
		bgImg = $("<div style='background:transparent url("+this.path+"color_wheel.png) 0 0 no-repeat;width:157px;height:157px;position:absolute;'></div>");
		this.el.html(bgImg);
		supportedCSS = checkCSS3();// check for CSS3 
		isIE = $.browser.msie;// check IE
		if(supportedCSS===undefined){
			img=new Image();img.src=this.path+"color_wheel.png";var w=157,h=157,hw=w/2,hh=h/2;v={w:w,h:h,hw:hw,hh:hh};
			if(isIE){
				canvas=$("<div/>").css('width',w).css('height',h).css('position','relative');var vimage = createVMLNode('image');$(vimage).attr('style','position:relative;top:0px;left:0px;width:'+w+'px;height:'+h+'px').attr('src',img.src);cnv=createVMLNode('group');cnv.style.width=w;cnv.style.height=h;cnv.style.position="absolute";cnv.setAttribute('coordsize',w-1+','+(h-1));cnv.appendChild(vimage);canvas.html(cnv);canvas=canvas.get(0);$.extend(v,{canvas:canvas,cnv:cnv});
			}else{
				max=Math.sqrt(h*h+w*w),widthAdd=max-w,heightAdd=max-h,widthAddHalf=widthAdd/2,heightAddHalf=heightAdd/2;canvas=document.createElement('canvas');canvas.style.position="relative";canvas.style.left=-widthAddHalf+"px";canvas.style.top=-heightAddHalf+"px";canvas.setAttribute('width',max);canvas.setAttribute('height',max);cnv=canvas.getContext('2d');$.extend(v,{canvas:canvas,cnv:cnv,widthAdd:widthAdd,heightAdd:heightAdd,widthAddHalf:widthAddHalf,heightAddHalf:heightAddHalf});								
			}
			this.el.html(canvas);
		}
	}
	this.rotate = function(angle){if(supportedCSS===undefined){if(isIE){v.cnv.style.rotation = angle + "deg";}else{if(v==undefined) return;var rad=0.01745329;var angle=(angle%360)*rad;v.canvas.width=v.w+v.widthAdd;v.canvas.height=v.h+v.heightAdd;v.cnv.translate(v.widthAddHalf,v.heightAddHalf);v.cnv.translate(v.hw,v.hh);v.cnv.rotate(angle);v.cnv.translate(-v.hw,-v.hh);v.cnv.drawImage(img,0,0);}}else{this.el.get(0).style[supportedCSS]="rotate("+angle+"deg)";}}
	var checkCSS3 = function(){var CSS3,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");for(var a=0;a<toCheck.length;a++)if(styles[toCheck[a]]!==undefined)CSS3=toCheck[a];return CSS3;}
	var createVMLNode = function(tagName){document.namespaces.rvml||document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try	{!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");return document.createElement('<rvml:'+tagName+' class="rvml">');}catch(e){return document.createElement('<'+tagName+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');};}
};
this.SCP(el);
}