// some code borrowed and modified from http://www.ficml.org/jemimap/style/color/wheel.html

var cp_mouse;
var cp_mouse_maxValue;			 //this is the RGB selection that corresponds to the "100% brightness" state
var brightness_bar_colors = new Array(10);
var cp_lock = 0;
var x=0;
var y=0;
var brightnessValue = "100";

function cp_init() 
{
    var rgbbox, picked_rgb;
    if(document.layers) {
        rgbbox = eval('document.layers["colorValueRGB"]');
    } else if (document.all) {
        rgbbox = eval('document.forms.Form1.colorValueRGB');
    } else if (document.getElementById) {
        rgbbox = eval('document.getElementById("colorValueRGB")');
    }
    
    if (null != rgbbox.value)
    { 
        picked_rgb = rgbbox.value;
        set_rgb_vals(picked_rgb);
        var hsvarr = rgb2hsv(picked_rgb);
        set_brightness_vals(hsvarr[0], hsvarr[1], picked_rgb); 
        var bar_num = document.getElementById("brightnessBarSelected").value;
        if ("" != bar_num) {
            for (var x=0; x < 10; x++) {
                var rightArrow = document.getElementById("right_" + x);
                var leftArrow = document.getElementById("left_" + x);

                if (x == bar_num) {
                    rightArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowRight_10x10.gif";
                    leftArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowLeft_10x10.gif";
                } else {
                    rightArrow.src = "/smith_noble/images/spacer.gif";
                    leftArrow.src = "/smith_noble/images/spacer.gif";
                }
            }
        }
    }
}

function captureXY(e) 
{
    var cp_rgb;
    var cp_rgb_maxValue;		     //this is the RGB value that corresponds to the "100% brightness" state
    var cp_adeg = 0;
    var cp_val = 1.0;
    var cp_sat = 1.0;
    
    if (!e) 
    {
   	var e = window.event;
    }
    coordinate(e);
      
    if (x <= 0 || x >=119 || y <=0 || y >= 119)
    {   
        cp_lock = 0;
    }
    if (x >= 119) {return false;}
    if (y >= 119) {return false;}
        
    var cartx = x - 59;
    var carty = 59 - y; 
    var cartx2 = cartx * cartx;
    var carty2 = carty * carty;              //normalize x
    var rraw = Math.sqrt(cartx2 + carty2);   //raw radius 
    var rnorm = rraw/59;                     //normalized radius
    
    var brightnessBarCurrentValue = document.getElementById("brightnessBarSelected").value;
    if ((brightnessBarCurrentValue == null) || (brightnessBarCurrentValue == ""))
    {
    	document.getElementById("brightnessBarSelected").value = 9;
    	brightnessBarCurrentValue = 9;
    }
    
    cp_val = getStepVal(parseInt(brightnessBarCurrentValue));
    
    if (rraw > 60) 
    {
        cp_lock = 1;
    } 
    else 
    {
        cp_lock = 0;
    }
    
    if (rraw == 0) 
    {
        cp_rgb = new Array((255 * cp_val), (255 * cp_val), (255 * cp_val));
        cp_rgb_maxValue = new Array(255, 255, 255);
    } 
    else 
    {
        var arad = Math.acos(cartx/rraw);              //angle in radians 
        var aradc = (carty>=0)?arad:2*Math.PI - arad;  //correct below axis
        cp_adeg = 360 * aradc/(2*Math.PI);             //convert to degrees
        if (rnorm > 1) 
        {   // outside circle
            cp_rgb = new Array((255 * cp_val), (255 * cp_val), (255 * cp_val));
            cp_rgb_maxValue = new Array(255, 255, 255);
       	} 
        else 
        {
            cp_sat = rnorm;
            cp_rgb = hsv2rgb(cp_adeg, cp_sat, cp_val);
            cp_rgb_maxValue = new Array(cp_adeg, cp_sat, 1);
        }
    }
    
    cp_mouse = rgb2hex(cp_rgb);
    cp_mouse_maxValue = rgb2hex(cp_rgb_maxValue);
        
    if (cp_lock == 0)
    {
        //display RGB value picked by customer
        set_rgb_vals(cp_mouse)
        //display different brightness options for the picked color
        set_brightness_vals(cp_adeg, cp_sat, cp_mouse_maxValue);
        
        for (var count=0; count < 10; count++) 
        {
           var rightArrow = document.getElementById("right_" + count);
           var leftArrow = document.getElementById("left_" + count);
           if (count == (document.getElementById("brightnessBarSelected").value)) 
           {
               rightArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowRight_10x10.gif";
               leftArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowLeft_10x10.gif";
           } 
           else 
           {
               rightArrow.src = "/smith_noble/images/spacer.gif";
               leftArrow.src = "/smith_noble/images/spacer.gif";
           }
        }
    	setColorWheelPosition((x-4),(y-59));
    }
    return false;
}

// HSV conversion algorithm adapted from easyrgb.com
function hsv2rgb(Hdeg,S,V) 
{
  var H = Hdeg/360;     // convert from degrees to 0 to 1
  var R, G, B;
  if (S==0) {       // HSV values = From 0 to 1
    R = V*255;     // RGB results = From 0 to 255
    G = V*255;
    B = V*255;
  } else {
    var var_h = H*6;
    var var_i = Math.floor( var_h );     //Or ... var_i = floor( var_h )
    var var_1 = V*(1-S);
    var var_2 = V*(1-S*(var_h-var_i));
    var var_3 = V*(1-S*(1-(var_h-var_i)));
    var var_r, var_g, var_b;
    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}
    R = Math.round(var_r*255);   //RGB results = From 0 to 255
    G = Math.round(var_g*255);
    B = Math.round(var_b*255);
  }
  return new Array(R,G,B);
}

function rgb2hex(rgbary) {
  var hex = "";
  for (var i = 0; i < 3; i++) {
    var tmp = parseInt(rgbary[i]).toString(16);
    if (tmp.length < 2) tmp = "0" + tmp;
    hex = hex + tmp;
  }
  return hex;
}

// RGB conversion algorithm adapted from easyrgb.com
function rgb2hsv(rgb) 
{
    var R, G, B;
    var H = 0;
    var S = 0;
    var V = 0;
  
    var R = parseInt(rgb.substring(0,2),16)/255.0;
    var G = parseInt(rgb.substring(2,4),16)/255.0;
    var B = parseInt(rgb.substring(4,6),16)/255.0;

    var i = Math.max(Math.max(R,G),B);  // Get highest value.
    var j = Math.min(Math.min(R,G),B);  // Get lowest value.
    V = i;          

    if (i == j)             // Highest = lowest, it's grey.
    {
        H = 0;              // No hue (we'll use red).
        S = 0;              // No saturation.
    }
    else                    // This is a color pixel.
    {
        S = (i-j)/i;
        
        var rDelta = (((i-R)/6) + ((i-j)/2))/(i-j);
        var gDelta = (((i-G)/6) + ((i-j)/2))/(i-j);
        var bDelta = (((i-B)/6) + ((i-j)/2))/(i-j);
        
        if (R == i)     // It's in the low half.
            H = bDelta - gDelta;
        else if (G == i)        // It's in the high half.
            H = (1.0/3.0) + rDelta - bDelta;
        else
            H = (2.0/3.0) + gDelta - rDelta;
            
        if (H < 0)
            H += 1;
        else if (H > 1)
            H -= 1;
    }

    return new Array(H*360,S,V);
}

function set_brightness_vals(picked_hue, picked_sat, picked_rgb) 
{  // populate the brightness bars
    var bar = new Array(10);
    var step_val = 1;
    
    if(document.layers) {
        for (var i = 0; i < 10; i++) {
        bar[i] = eval('document.layers["brightness_bar_' + i + '"]');
        }
    } else if (document.all) {
        for (var i = 0; i < 10; i++) {
        bar[i] = eval('document.all.brightness_bar_' + i);
        }
    } else if (document.getElementById) {
        for (var i = 0; i < 10; i++) {
        bar[i] = eval('document.getElementById("brightness_bar_' + i + '")');
        }
    }
  
    if (picked_rgb == "") {
        picked_rgb = "undefined";
    }
    
    if ("undefined" != picked_rgb) {
        for (var i = 0; i < 10; i++) {
            step_val = getStepVal(i);
            //step_val = i/15.0;
            var step_rgb = hsv2rgb(picked_hue, picked_sat, step_val);
            var c = rgb2hex(step_rgb);
            brightness_bar_colors[i] = c;
            bar[i].style.backgroundColor = '#' + c;
            if (c == picked_rgb)
            {
                bar[i].style.height="10";
            }
            else
            {
                bar[i].style.height="10";
            }          
        }
    }
}

function getStepVal(step) 
{
    var stepVal = 0.0;
    switch (step) {
        case 0:
            stepVal = .30;
            break;
        case 1:
            stepVal = .45;
            break;
        case 2:
            stepVal = .60;
            break;
        case 3:
            stepVal = .70;
            break;
        case 4:
            stepVal = .75;
            break;
        case 5:
            stepVal = .80;
            break;
        case 6:
            stepVal = .85;
            break;
        case 7:
            stepVal = .90;
            break;
        case 8:
            stepVal = .95;
            break;
        case 9:
            stepVal = 1.0;
            break;
    }
    brightnessValue = (100*stepVal).toString();
    return stepVal;
}

function set_rgb_vals(picked_rgb) 
{  // populate the picked color
    var rgbswatch, rgbbox, huebox;
    
    if(document.layers) {
        rgbswatch = eval('document.layers["Swatch"]');
        rgbbox = eval('document.layers["colorValueRGB"]');
        huebox = eval('document.layers["hueValue"]');
    } else if (document.all) {
        rgbswatch = eval('document.all.Swatch');
        rgbbox = eval('document.forms.Form1.colorValueRGB');
        huebox = eval('document.all.hueValue');
    } else if (document.getElementById) {
        rgbswatch = eval('document.getElementById("Swatch")');
        rgbbox = eval('document.getElementById("colorValueRGB")');
        huebox = eval('document.getElementById("hueValue")');
    }
  
    if (picked_rgb == "") {
        picked_rgb = "undefined";
    }
    
    if ("undefined" != picked_rgb) {
        rgbswatch.style.backgroundColor = '#' + picked_rgb;
        rgbbox.value = picked_rgb; 
        //huebox.value = "0.4";
    }
}

function brightness_bar(bar_num) 
{  // clicked the bar, update the swatch
  
  for (var x=0; x < 10; x++) {
    var rightArrow = document.getElementById("right_" + x);
    var leftArrow = document.getElementById("left_" + x);
    if (x == bar_num) {
        rightArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowRight_10x10.gif";
        leftArrow.src = "/smith_noble/images/v3/swatches/icoGreyArrowLeft_10x10.gif";
        
        document.getElementById("brightnessBarSelected").value = bar_num;
        setColorWheelBrightness(bar_num);
    } else {
        rightArrow.src = "/smith_noble/images/spacer.gif";
        leftArrow.src = "/smith_noble/images/spacer.gif";
    }
  }
  
  cp_mouse = brightness_bar_colors[bar_num];
  set_rgb_vals(cp_mouse);
  cp_init();
}

function coordinate(e) 
{
    //Determine x and y offsets relative to the color wheel
    if (document.layers) 
    {
        x = e.layerX;
        y = e.layerY;
    } 
    else if (document.all) 
    {
        x = event.offsetX;
        y = event.offsetY; // mac IE fix
        //y = event.offsetY + document.body.scrollTop; // mac IE fix
    } 
    else if (document.getElementById) 
    {
        var x_off = 0, y_off = 0;
        x_off = document.getElementById("colorWheel").offsetLeft;
        y_off = document.getElementById("colorWheel").offsetTop;
        var parent = document.getElementById("colorWheel").offsetParent;
        while(parent) 
        {
            x_off = x_off + parent.offsetLeft;
            y_off = y_off + parent.offsetTop;
            parent = parent.offsetParent;
        }
        x = (e.pageX - x_off);
        y = (e.pageY - y_off);
    }
}

function setColorWheelPosition(setX, setY) 
{
    var positionMarker = document.getElementById("colorWheelPosition");
    positionMarker.style.left = setX;
    positionMarker.style.top = setY;

    var positionX = document.getElementById("colorWheelPositionX");
    positionX.value = setX;
    var positionY = document.getElementById("colorWheelPositionY");
    positionY.value = setY;   
}

function setColorWheelBrightness(brightnessBar)
{
    var stepValue = getStepVal(brightnessBar);
    var colorWheelStyleName = "colorWheelP" + brightnessValue;
    var colorWheelTable = document.getElementById("colorWheel");
    colorWheelTable.className = colorWheelStyleName;
    
    var colorWheelImageName = imageColorWheelNameRoot + brightnessValue + imageColorWheelNameEnd;
    var colorWheelSelected = document.getElementById("colorWheelSelected");
    colorWheelSelected.value = colorWheelImageName;
}