var Dom = YAHOO.util.Dom;

    var range = 370;

    var tickSize = 0;
	var shadeslider;
	var colorslider;
	var clarityslider;
	
var selectedOpt;
var selectedId;

function sliderUpdate(id){
selectedId = id;

if (selectedId == "shadeFrom" || selectedId=="shadeTo"){
	var shademin = {9:"0",10:"60",11:"120",12:"180",13:"250",14:"300"}
	var shademax = {9:"60",10:"120",11:"180",12:"250",13:"300",14:"370"}
	var themin = $("#shadeFrom").val()*1;
	var themax = $("#shadeTo").val()*1;
var minnew = parseInt(shademin[themin]);
var maxnew = parseInt(shademax[themax]);

	if (themin>themax)
	{
	    if(shadeslider.minVal!=minnew){
		var hold = themin;
		themin = themax;
		themax=hold;
		}
		if(shadeslider.maxVal!=maxnew){
		var hold = themax;
		themin=themax;
		
		}
		$('#shadeFrom_input_'+themin+',#shadeTo_input_'+themax).trigger('click');ClearGrid();RefreshGrid();
	/*
if(selectedId=="shadeFrom"){
			console.log(themin,themax)
			themax=themin;
			var minnew = parseInt(shademin[themin]);
			var maxnew = parseInt(shademax[themax]);
			shadeslider.setValues(minnew,maxnew);
				
			console.log(themin,themax)
	}
	else{
			themin=themax;
			var minnew = parseInt(shademin[themin]);
			var maxnew = parseInt(shademax[themax]);
			shadeslider.setValues(minnew,maxnew);
	}
*/

	}
				
else{
	if (shadeslider.minVal !== minnew || shadeslider.maxVal !== maxnew) {
	shadeslider.setValues(minnew,maxnew,false,true,true);
				
			var delta = maxnew - minnew; 	
			var left = minnew+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        	$('#shadehighlight').css("left",left);
        	$('#shadehighlight').css("width",hwidth); 
        	}
	
	ClearGrid();RefreshGrid();}
	
	}


if (selectedId == "colorFrom" || selectedId=="colorTo"){

	var colormin = {0:"0",1:"40",2:"85",3:"125",4:"166",5:"205",6:"240",7:"275",8:"315"}
	var colormax = {0:"40",1:"85",2:"125",3:"166",4:"205",5:"240",6:"275",7:"315",8:"370"}
	var themin = $("#colorFrom").val()*1;
	var themax = $("#colorTo").val()*1;
	var minnew = parseInt(colormin[themin]);
	var maxnew = parseInt(colormax[themax]);
	if (themin>themax)
	{
		var hold = themin;
		themin = themax;
		themax=hold;
		$('#colorFrom_input_'+themin+',#colorTo_input_'+themax).trigger('click');
	}
				
else{
	if (colorslider.minVal !== minnew || colorslider.maxVal !== maxnew) {
	
	colorslider.setValues(minnew,maxnew,false,true,true); 
			
			var delta = maxnew - minnew; 	
			var left = minnew+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        	$('#colorhighlight').css("left",left);
        	$('#colorhighlight').css("width",hwidth); 
}
ClearGrid();RefreshGrid();}
}
if (selectedId == "clarityFrom" || selectedId=="clarityTo"){

	var claritymin = {1:"0",2:"40",3:"68",4:"112",5:"156",6:"194",7:"232",8:"266",9:"300",10:"333"}
	var claritymax = {1:"40",2:"68",3:"112",4:"156",5:"194",6:"232",7:"266",8:"300",9:"333",10:"370"}
	
	var themin = $("#clarityFrom").val()*1;
	var themax = $("#clarityTo").val()*1;
	var minnew = parseInt(claritymin[themin]);
	var maxnew = parseInt(claritymax[themax]);
	if (themin>themax)
	{
		var hold = themin;
		themin = themax;
		themax=hold;
		$('#clarityFrom_input_'+themin+',#clarityTo_input_'+themax).trigger('click');ClearGrid();RefreshGrid();
	}
				
else{
	if (clarityslider.minVal !== minnew || clarityslider.maxVal !== maxnew) {
	clarityslider.setValues(minnew,maxnew,false,true,true);
	
				
			var delta = maxnew - minnew; 	
			var left = minnew+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        	$('#clarityhighlight').css("left",left);
        	$('#clarityhighlight').css("width",hwidth); }
	
	ClearGrid();RefreshGrid();
}
}

}
$(document).ready( function(){

$('#shadeFrom,#shadeTo,#colorFrom,#colorTo,#clarityFrom,#clarityTo').selectbox();

//Shade Slider Begin/////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////

 
        shadeslider = YAHOO.widget.Slider.getHorizDualSlider("shadeslider","shademin", "shademax", range, tickSize, [0,370]);
            	if($.browser.safari){ shadeslider.minRange = 10;}else{shadeslider.minRange=0;}
        YAHOO.lang.augmentObject(shadeslider, {
            _status : 'ok',
            _highlight : Dom.get("shadehighlight"),

            getStatus : function () { return this._status; },

            updateHighlight : function () {
                var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                if (this._status !== newStatus) {
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    Dom.setStyle(this._highlight,'left', (this.minVal + 10) + 'px');
                }
                Dom.setStyle(this._highlight,'width', Math.max(delta - 10,0) + 'px');
            }
},true);
          var updateShade = function(){
          var newmin;
          var newmax;
            if(this.minVal<=30){newmin=0;}
            else if(this.minVal < 90 && this.minVal > 30){ newmin = 60;}
            else if(this.minVal < 150 && this.minVal >= 90){ newmin = 120;}
            else if(this.minVal < 210 && this.minVal >= 150){ newmin = 180;}
            else if(this.minVal < 270 && this.minVal >= 210){ newmin = 250;}
            else if(this.minVal >= 270){ newmin = 300;}
			else{newmin=0;}

			if(this.maxVal<=30)								{ newmax = 60; }
            else if(this.maxVal < 90 && this.maxVal > 30)   { newmax = 60; }
            else if(this.maxVal < 150 && this.maxVal >= 90) { newmax = 120;}
            else if(this.maxVal < 210 && this.maxVal >= 150){ newmax = 180;}
            else if(this.maxVal < 285 && this.maxVal >= 210){ newmax = 250;}
            else if(this.maxVal >= 285 && this.maxVal < 330){ newmax = 300;}
            else if(this.maxVal >= 330)						{ newmax = 370;}
			else{newmax=0;}
			
			if (newmin===newmax){
			if (this.activeSlider === this.minSlider){ newmin = newmin - 60;}
			else{newmax=newmax + 60;}
			}
			
									          
        	shadeslider.setValues(newmin,newmax,false,true,true);			
			var delta = newmax - newmin; 	
			var left = newmin+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        
        	$('#shadehighlight').css("left",left);
        	$('#shadehighlight').css("width",hwidth);										
			var setshademin = {0:"9",60:"10",120:"11",180:"12",250:"13",300:"14"}
			var setshademax = {60:"9",120:"10",180:"11",250:"12",300:"13",370:"14"}
			//$('#shadeFrom').val(setshademin[newmin]);
			//$('#shadeTo').val(setshademax[newmax]);
			
			if($("#shadeFrom").val()!=setshademin[newmin]){ 
			$('#shadeFrom_input_'+setshademin[newmin]).trigger('click');
			}
			if($("#shadeTo").val()!=setshademax[newmax]){
			$('#shadeTo_input_'+setshademax[newmax]).trigger('click');
			}
            };

		
		
        shadeslider.subscribe('change',shadeslider.updateHighlight,shadeslider,true);
		shadeslider.subscribe('slideEnd',updateShade);
		
	//	shadeslider.minSlider.subscribe("endDragEvent",updatethemin,shadeslider,true);
		shadeslider.minSlider.subscribe( "endDragEvent", updateShade, shadeslider, true );
		shadeslider.maxSlider.subscribe( "endDragEvent", updateShade, shadeslider, true );
		
//Shade Slider End////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////

//Color Slider Begin/////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
        colorslider = YAHOO.widget.Slider.getHorizDualSlider("colorslider","colormin", "colormax", range, tickSize, [0,370]);
            	if($.browser.safari){ colorslider.minRange = 10;}else{colorslider.minRange=0;}
        YAHOO.lang.augmentObject(colorslider, {
            _status : 'ok',
            _highlight : Dom.get("colorhighlight"),

            getStatus : function () { return this._status; },
	
            updateHighlight : function () {
				
				//console.log(this.maxVal,this.minVal)

               var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                if (this._status !== newStatus) {
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    Dom.setStyle(this._highlight,'left', (this.minVal + 10) + 'px');
                }
                Dom.setStyle(this._highlight,'width', Math.max(delta - 10,0) + 'px');
                        
            }
},true);
          var updateColor = function(){
          var newmin;
          var newmax;
            if(this.minVal<=17){newmin=0;}
            else if(this.minVal < 58 && this.minVal > 17){ newmin = 40;}
            else if(this.minVal < 96 && this.minVal >= 58){ newmin = 85;}
            else if(this.minVal < 136 && this.minVal >= 96){ newmin = 125;}
            else if(this.minVal < 176 && this.minVal >= 136){ newmin = 166;}
            else if(this.minVal < 216 && this.minVal >= 176){ newmin = 205;}
            else if(this.minVal < 253 && this.minVal >= 216){ newmin = 240;}
            else if(this.minVal < 293 && this.minVal >= 253){ newmin = 275;}
            else if(this.minVal >= 293){ newmin = 315;}
			else{newmin=0;}

            if(this.maxVal<=68){newmax=40;}
            else if(this.maxVal < 106 && this.maxVal > 68){ newmax = 85;}
            else if(this.maxVal < 148 && this.maxVal >= 106){ newmax = 125;}
            else if(this.maxVal < 187 && this.maxVal >= 148){ newmax = 166;}
            else if(this.maxVal < 226 && this.maxVal >= 167){ newmax = 205;}
            else if(this.maxVal < 263 && this.maxVal >= 226){ newmax = 240;}
            else if(this.maxVal < 293 && this.maxVal >= 253){ newmax = 275;}
            else if(this.maxVal >= 293 && this.maxVal <343){ newmax = 315;}
            else if (this.maxVal>=343){newmax=370;}
			else{newmax=0;}

			if (newmin===newmax){
			if (this.activeSlider === this.minSlider){ newmin = newmin - 40;}
			else{newmax=newmax + 40;}
			}
			//console.log(newmin,newmax);			          
        	colorslider.setValues(newmin,newmax,false,true,true);
			
			var delta = newmax - newmin; 	
			var left = newmin+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        
        	$('#colorhighlight').css("left",left);
        	$('#colorhighlight').css("width",hwidth);

			var setcolormin = {0:"0",40:"1",85:"2",125:"3",166:"4",205:"5",240:"6",275:"7",315:"8"}
			var setcolormax = {40:"0",85:"1",125:"2",166:"3",205:"4",240:"5",275:"6",315:"7",370:"8"}
			
			if($("#colorFrom").val()!=setcolormin[newmin]){ 
			$('#colorFrom_input_'+setcolormin[newmin]).trigger('click');
			}
			if($("#colorTo").val()!=setcolormax[newmax]){
			$('#colorTo_input_'+setcolormax[newmax]).trigger('click');
			}
            
            };
		
        colorslider.subscribe('change',colorslider.updateHighlight,colorslider,true);
		colorslider.subscribe('slideEnd',updateColor,colorslider,true);
		colorslider.minSlider.subscribe( "endDragEvent", updateColor, colorslider, true );
		colorslider.maxSlider.subscribe( "endDragEvent", updateColor, colorslider, true );
		
//Color Slider End////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////


//Clarity Slider Begin/////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
        clarityslider = YAHOO.widget.Slider.getHorizDualSlider("clarityslider","claritymin", "claritymax", range, tickSize, [0,370]);
            	if($.browser.safari){ clarityslider.minRange = 10;}else{clarityslider.minRange=0;}
        YAHOO.lang.augmentObject(clarityslider, {
            _status : 'ok',
            _highlight : Dom.get("clarityhighlight"),

            getStatus : function () { return this._status; },

            updateHighlight : function () {
                var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                if (this._status !== newStatus) {
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    Dom.setStyle(this._highlight,'left', (this.minVal + 10) + 'px');
                }
                Dom.setStyle(this._highlight,'width', Math.max(delta - 10,0) + 'px');
            }
},true);
          var updateclarity = function(){
          var newmin;
          var newmax;
            if(this.minVal<=21){newmin=0;}
            else if(this.minVal < 48 && this.minVal > 21){ newmin = 40;}
            else if(this.minVal < 84 && this.minVal >= 48){ newmin = 68;}
            else if(this.minVal < 130 && this.minVal >= 84){ newmin = 112;}
            else if(this.minVal < 172 && this.minVal >= 130){ newmin = 156;}
            else if(this.minVal < 208 && this.minVal >= 172){ newmin = 194;}
            else if(this.minVal < 243 && this.minVal >= 208){ newmin = 232;}
            else if(this.minVal < 278 && this.minVal >= 243){ newmin = 266;}
            else if(this.minVal < 312 && this.minVal >= 278){ newmin = 300;}
            else if(this.minVal >= 312){ newmin = 333;}
			else{newmin=0;}

            if(this.maxVal<=58){newmax=40;}
            else if(this.maxVal < 94 && this.maxVal > 58){ newmax = 68;}
            else if(this.maxVal < 130 && this.maxVal >= 94){ newmax = 112;}
            else if(this.maxVal < 180 && this.maxVal >= 130){ newmax = 156;}
            else if(this.maxVal < 218 && this.maxVal >= 180){ newmax = 194;}
            else if(this.maxVal < 255 && this.maxVal >= 218){ newmax = 232;}
            else if(this.maxVal < 286 && this.maxVal >= 255){ newmax = 266;}
            else if(this.maxVal < 320 && this.maxVal >= 286){ newmax = 300;}
            else if(this.maxVal < 350 && this.maxVal >= 320){ newmax = 333;}
            else if (this.maxVal>=350){newmax=370;}
			else{newmax=0;}

			if (newmin===newmax || newmin>newmax){
			

			if (this.activeSlider === this.minSlider){ newmin = newmin - 30;}
			else{newmax=newmax + 30;}
			}
						          
        	clarityslider.setValues(newmin,newmax,false,true,true);
        				
			var delta = newmax - newmin; 	
			var left = newmin+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        
        
        	$('#clarityhighlight').css("left",left);
        	$('#clarityhighlight').css("width",hwidth);
						
			var setclaritymin = {0:"1",40:"2",68:"3",112:"4",156:"5",194:"6",232:"7",266:"8",300:"9",333:"10"}
			var setclaritymax = {40:"1",68:"2",112:"3",156:"4",194:"5",232:"6",266:"7",300:"8",333:"9",370:"10"}
			
			if($("#clarityFrom").val()!=setclaritymin[newmin]){ 
			$('#clarityFrom_input_'+setclaritymin[newmin]).trigger('click');
			}
			if($("#clarityTo").val()!=setclaritymax[newmax]){
			$('#clarityTo_input_'+setclaritymax[newmax]).trigger('click');
			}
            
            };
		
        clarityslider.subscribe('change',clarityslider.updateHighlight,clarityslider,true);
		clarityslider.subscribe('slideEnd',updateclarity);
		clarityslider.minSlider.subscribe( "endDragEvent", updateclarity, clarityslider, true );
		clarityslider.maxSlider.subscribe( "endDragEvent", updateclarity, clarityslider, true );
		
//clarity Slider End////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////


$('#theshade').hide(60);



    });