/***********
Color Module
************/

var currentColorType = "RGB"; // RGB or HSL

function addColorBox(parentID, colorType, colorID, param1, param2, param3, param4) {
  var s = "<fieldset><legend onclick='rangeToggle();'>" + colorType + "</legend>";
  
  // First value
  s += "<div>";
  
  // First label
  s += "<label for='" + colorID + "1'>";
  if (colorType.indexOf("HSL") > -1) {s += "Hue";} // Hue label
  if (colorType.indexOf("RGB") > -1) {s += "Red";} // Red label
  s += "<\/label>";
  
  s += "<input type='range' id='" + colorID + "1' min='0' max='";
  if (colorType.indexOf("HSL") > -1) {s += "359";} // Max hue
  if (colorType.indexOf("RGB") > -1) {s += "255";} // Max Red
  s += "' value='" + param1 + "'";
  if (colorType.indexOf("RGB") > -1) {s += " class='red'";}
  s += " onchange='updateColorBox(\"" + colorID + "\");";
  
  // Update on change
  if (colorType.indexOf("RGB") > -1) {s += "updateRed(\"" + colorID + "\");";}
  if (colorType.indexOf("HSL") > -1) {s += "updateHue(\"" + colorID + "\");";}
  
  s += "'>";
  
  s += "<\/div>";
  
  // Second value
  s += "<div>";
  
  // Second label
  s += "<label for='" + colorID + "2'>";
  if (colorType.indexOf("HSL") > -1) {s += "Saturation";} // Saturation label
  if (colorType.indexOf("RGB") > -1) {s += "Green";} // Green label
  s += "<\/label>";
  
  s += "<input type='range' id='" + colorID + "2' min='0' max='";
  if (colorType.indexOf("HSL") > -1) {s += "100";} // Max saturation
  if (colorType.indexOf("RGB") > -1) {s += "255";} // Max Green
  s += "' value='" + param2 + "'";
  if (colorType.indexOf("RGB") > -1) {s += " class='green'";}
  s += " onchange='updateColorBox(\"" + colorID + "\");";
  
  // Update on change
  if (colorType.indexOf("RGB") > -1) {s += "updateGreen(\"" + colorID + "\");";}
  if (colorType.indexOf("HSL") > -1) {s += "updateSat(\"" + colorID + "\");";}
  
  s += "'>";
  
  s += "<\/div>";
  
  // Third value
  s += "<div>";
  
  // Third label
  s += "<label for='" + colorID + "3'>";
  if (colorType.indexOf("HSL") > -1) {s += "Lightness";} // Lightness label
  if (colorType.indexOf("RGB") > -1) {s += "Blue";} // Blue label
  s += "<\/label>";
  
  s += "<input type='range' id='" + colorID + "3' min='0' max='";
  if (colorType.indexOf("HSL") > -1) {s += "100";} // Max saturation
  if (colorType.indexOf("RGB") > -1) {s += "255";} // Max Blue
  s += "' value='" + param3 + "'";
  if (colorType.indexOf("RGB") > -1) {
    s += " class='blue'";
  }
  s += " onchange='updateColorBox(\"" + colorID + "\");";
  
  // Update on change
  if (colorType.indexOf("RGB") > -1) {
    s += "updateBlue(\"" + colorID + "\");";
  }
  if (colorType.indexOf("HSL") > -1) {
    s += "updateLit(\"" + colorID + "\");";
  }
  
  s += "'>";
  
  s += "<\/div>";
  
  // Fourth value (Opacity)
  if (param4 != null) {
    s+="<div>";
    s+="<label for='" + colorID + "4'>Opacity<\/label>"; // Fourth label
    s+="<input type='range' id='" + colorID + "4' min='0' max='100' value='" + param4 + "' onchange='updateColorBox(\"" + colorID + "\");'>";
	s+="<\/div>";
  }
  
  s+="<hr><div class='previewBox' id='" + colorID + "Club' onclick='updateColorBox(\"" + colorID + "\");colorSpaceToggle();'><\/div>";
  
  s+="<\/fieldset>";
  document.getElementById(parentID).innerHTML = s;
  
  // HSL color setup
  if (colorType.indexOf("HSL") > -1) {
    updateHue(colorID);
  }
  // RGB color setup
  if (colorType.indexOf("RGB") > -1) {
    updateRed(colorID);
    updateGreen(colorID);
    updateBlue(colorID);
  }
}

function updateHue(ID) {
  var temp = hsl2rgb(g(ID + "1").value, 100, 50);
  g(ID + "1").style.backgroundColor = "rgb(" + temp[0] + ", " + temp[1] + ", " + temp[2] + ")";
  g(ID + "1").style.color = "rgb(" + (255 - temp[0]) + ", " + (255 - temp[1]) + ", " + (255 - temp[2]) + ")";
  updateSat(ID);
  updateLit(ID);
}
function updateSat(ID) {
  var temp = hsl2rgb(g(ID + "1").value, g(ID + "2").value, 50);
  g(ID + "2").style.backgroundColor = "rgb(" + temp[0] + ", " + temp[1] + ", " + temp[2] + ")";
  g(ID + "2").style.color = "rgb(" + (255 - temp[0]) + ", " + (255 - temp[1]) + ", " + (255 - temp[2]) + ")";
}
function updateLit(ID) {
  var temp = hsl2rgb(g(ID+"1").value, 100, g(ID+"3").value);
  g(ID + "3").style.backgroundColor = "rgb(" + temp[0] + ", " + temp[1] + ", " + temp[2] + ")";
  g(ID + "3").style.color = "rgb(" + (255 - temp[0]) + ", " + (255 - temp[1]) + ", " + (255 - temp[2]) + ")";
}

function updateRed(ID) {
  g(ID + "1").style.background = "rgb(" + g(ID + "1").value + ", 0, 0)";
}
function updateGreen(ID) {
  var v = g(ID + "2").value, temp = "#000";
  g(ID + "2").style.backgroundColor = "rgb(0, " + v + ", 0)";
  g(ID + "2").style.color = "rgb(" + (255 - v) + ", " + (255 - v) + ", " + (255 - v) + ")";
}
function updateBlue(ID) {
  g(ID + "3").style.backgroundColor = "rgb(0, 0, " + g(ID + "3").value + ")";
}

function rangeToggle() {
  var temp = document.getElementsByTagName("input"), temp2 = [], temp3;
  for (i=0; i < temp.length; i++) {
    if (temp[i].max) {
      temp2.push(temp[i]);
    }
  }
  
  // Browser doesn't support ranges properly anyway.
  if (temp2.length < 1) {
    return;
  }
  
  temp = temp2[0].type.match("range") != null;
  for (i=0; i < temp2.length; i++) {
    temp3 = temp2[i].value;
    temp2[i].type = temp ? "number" : "range";
    temp2[i].value = temp3;
  }
}

// Toggles between HSL and RGB color spaces.
function colorSpaceToggle() {
  loadSkinGlobal();
  var temp = data.get("Velt_2_skinGlobal").split("|N|");
  temp[6] = (parseInt(temp[6]) == 1) ? 0 : 1;
  document.getElementsByName("colorType")[parseInt(temp[6])].checked = true;
  saveSkinGlobal();
}

function getRangeColorValue(colorType, colorID) {
  var val1 = g(colorID + "1").value;
  var val2 = g(colorID + "2").value;
  var val3 = g(colorID + "3").value;
  if (colorType == "RGB") {
    return "rgb(" + val1 + ", " + val2 + ", " + val3 + ")";
  }
  var temp = hsl2rgb(val1, val2, val3);
  if (colorType == "HSL") {
    return "rgb(" + temp[0] + ", " + temp[1] + ", " + temp[2] + ")";
  }
  var val4 = g(colorID+"4").value/100;
  if (colorType == "RGBA") {
    return "rgba(" + val1 + ", " + val2 + ", " + val3 + ", " + val4 + ")";
  }
  if (colorType == "HSLA") {
    return "hsla(" + temp[0] + ", " + temp[1] + "%, " + temp[2] + "%, " + val4 + ")";
  }
}

function updateColorBox(colorID) {
  g(colorID + "Club").style.backgroundColor = getRangeColorValue(currentColorType, colorID);
}

// Selected color is valid RGB.
function validColor(a) {
  return (!isNaN(parseInt(a)) && parseInt(a) < 256 && parseInt(a) >= 0);
}

// RGB -> HEX
function RGB2HEX(a) {
  var temp = parseInt(a).toString(16);
  return (temp.length<2) ? "0" + temp : temp; 
}

// HEX -> RGB
function HEX2RGB(a) {
  return parseInt(a, 16);
}

// RGB -> HSL
function rgb2hsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  var h = 0;
  var s = 0;
  var l = 0;
  
  var min = Math.min(r, g, b);
  var max = Math.max(r, g, b);
  
  if (max != 0) {
    l = (max + min) / 2.0;
  }
  
  // Not gray
  if (min != max) {
    var d = max - min;
    
    // Calculate saturation
    s = (l > 0.50) ? d / (2.0 - (max + min)) : d / (max + min);
    
    // Calculate hue
    switch (max) {
      case r: h = (g - b) / d + ((g < b) ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

// HSL -> RGB
function colorC(t, l, s) {
  var q = (l < 0.5) ? (l * (1 + s)) : (l + s - (l * s));
  var p = (2 * l) - q;
  if (t < 0) {
    t++;
  }
  if (t > 1) {
    t--;
  }
  if (t < (1/6)) {
    return p + ((q - p) * 6 * t);
  }
  if (((1/6) <= t) && (t < 0.5)) {
    return q;
  }
  if ((0.5 <= t) && (t < (2/3))) {
    return p + ((q - p) * 6 * ((2/3) - t));
  }
  return p;
}

function hsl2rgb(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;
  
  var r = l;
  var g = l;
  var b = l;
  
  if (s != 0) {
    r = colorC(h + (1/3), l, s);
    g = colorC(h, l, s);
    b = colorC(h - (1/3), l, s);
  }
  
  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}