//var IE = document.all&&!window.opera; //true, wenn Internet Explorer verwendet wird

/***KLASSEN***/

//allgemeine Klasse fuer die Zeiger
function Zeiger(id, left, top) {
  this.id = id;
  this.left = left || 0;
  this.top = top || 0;
}

//allgemeine Klasse fuer die Balken
function Schieber(ids, zeiger, xf, yf, vbalken, vfarben, vtopbalken) {
  this.aktiv = "n";
  this.ids = ids;
  this.zeiger = zeiger;
  this.xfarbe = xf || ""; //Variablenname der Farbe, die mit der x-Achse geaendert werden soll, als String
  this.yfarbe = yf || ""; //Variablenname der Farbe, die mit der y-Achse geaendert werden soll, als String
  this.letzter = false;
  
  this.vbalken = vbalken;
  this.vfarben = vfarben;
  this.vtopbalken = vtopbalken;
}
  Schieber.prototype={
    aktivieren:function() {
      this.aktiv = "j";
      //Piwik-tracking
      piwikTracking() ;
    },
    is_aktiv:function() {
      if(this.aktiv == "j") {
        return true;
      } else {
        return false;
      }
    },
    x_zu_farbe:function(e) {
      if(this.xfarbe != "") {
        var elementpos = 0;
        for (var i = 0; i < this.ids.length; i++) {
          elementpos = elementpos + document.getElementById(this.ids[i]).offsetLeft
        }
        var x = e.clientX - elementpos;
            
        var farbe = x;
        if (farbe < 0) { farbe = 0; }
        if (farbe > 255) { farbe = 255; }
        window[this.xfarbe] = farbe; //globalen Farbwert aendern
      }
    },
    kehr_y_zu_farbe:function(e) {
      if(this.yfarbe != "") {
        var elementpos = 0;
        for (var i = 0; i < this.ids.length; i++) {
          elementpos = elementpos + document.getElementById(this.ids[i]).offsetTop
        }
        var y = e.clientY - elementpos;
            
        var farbe = 256 - y;
        if (farbe < 0) { farbe = 0; }
        if (farbe > 255) { farbe = 255; }
        window[this.yfarbe] = farbe; //globalen Farbwert aendern
      }
    },
    x_move_zeiger:function() {
      document.getElementById(this.zeiger.id).style.left = (window[this.xfarbe] - this.zeiger.left) + "px";
    },
    kehr_y_move_zeiger:function() {
      document.getElementById(this.zeiger.id).style.top = (255 - window[this.yfarbe] - this.zeiger.top) + "px";
    },
    deaktivieren:function() {
      this.aktiv = "n";
      werte_aendern(); //globale Funktion
    },
    set_opacity:function() {
      if(!this.is_aktiv()) {
        var farbe = 0 ;
    	  if (this.vbalken.length > 1) {
    	    if (window[this.vfarben[0]] < window[this.vfarben[1]]) {
      		  farbe = (window[this.vfarben[0]])/255 ;
      		  set_css_opacity(this.vbalken[1], (window[this.vfarben[1]]-window[this.vfarben[0]]) / (255-window[this.vfarben[0]])) ;
      		  document.getElementById(this.vbalken[0]).style.display = 'none' ;
      		  document.getElementById(this.vbalken[1]).style.display = 'block' ;
      		} else {
      		  farbe = (window[this.vfarben[1]])/255 ;
      		  set_css_opacity(this.vbalken[0], (window[this.vfarben[0]]-window[this.vfarben[1]]) / (255-window[this.vfarben[1]])) ;
      		  document.getElementById(this.vbalken[0]).style.display = 'block' ;
      	    document.getElementById(this.vbalken[1]).style.display = 'none' ;
      		}
        } else {
          farbe = (window[this.vfarben[0]])/255 ;
        }
    	  set_css_opacity(this.vtopbalken, farbe)
      }
    },
    click:function(e) {
      this.x_zu_farbe(e);
      this.kehr_y_zu_farbe(e);
      nichtLetzter();
      this.letzter = true;
      werte_aendern(); //globale Funktion
      //Piwik-tracking
      piwikTracking() ;
    },
    move:function(e) {
      if(this.is_aktiv()) {
        this.x_zu_farbe(e);
        this.kehr_y_zu_farbe(e);
        nichtLetzter();
        this.letzter = true;
        werte_aendern(); //globale Funktion
      }
    }
  }

//allgemeine Klasse fuer die Hell-Dunkel-Balken
function hdSchieber(ids, zeiger, typ, id) {
  this.aktiv = "n";
  this.ids = ids;
  this.zeiger = zeiger;
  this.typ = typ;
  this.id = id;
  this.x = 0;
  if (typ == "dunkel") {
    this.gross_rot = 256;
    this.gross_gruen = 256;
    this.gross_blau = 256;
  } else {
    this.gross_rot = 0;
    this.gross_gruen = 0;
    this.gross_blau = 0;
  }
  this.verh_rot = 1;
  this.verh_gruen = 1;
  this.verh_blau = 1;
  this.letzter = false;
}
  hdSchieber.prototype={
    aktivieren:function() {
      this.aktiv = "j";
      //Piwik-tracking
      piwikTracking() ;
    },
    is_aktiv:function() {
      if(this.aktiv == "j") {
        return true;
      } else {
        return false;
      }
    },
    verhaeltnisse:function() {
      if (this.typ == "dunkel") {
        var gross = window[groesste_farbe()];

        var faktor = 256 / (gross + 1);
        
        this.gross_rot = Math.round((rot + 1) * faktor);
        this.gross_gruen = Math.round((gruen + 1) * faktor);
        this.gross_blau = Math.round((blau + 1) * faktor);
        
        this.verh_rot = this.gross_rot / 256;
        this.verh_gruen = this.gross_gruen / 256;
        this.verh_blau = this.gross_blau / 256;
        
      } else {
        var klein = window[kleinste_farbe()];
        
        if (klein == 255) {
          this.gross_rot = 1;
          this.gross_gruen = 1;
          this.gross_blau = 1;
        } else {
          var faktor = 256 / (256 - (klein + 1));
        
          this.gross_rot = Math.round(256 - ((256 - (rot + 1)) * faktor));
          this.gross_gruen = Math.round(256 - ((256 - (gruen + 1)) * faktor));
          this.gross_blau = Math.round(256 - ((256 - (blau + 1)) * faktor));
        }
        
        this.verh_rot = 1 - (this.gross_rot / 256);
        this.verh_gruen = 1 - (this.gross_gruen / 256);
        this.verh_blau = 1 - (this.gross_blau / 256);
      }
    },
    x_zu_farbe:function(e) {
      var elementpos = 0;
      for (var i = 0; i < this.ids.length; i++) {
        elementpos = elementpos + document.getElementById(this.ids[i]).offsetLeft;
      }
      var x = (e.clientX - elementpos) + 1;
      
      if (x < 1) x = 1;
      if (x > 256) x = 256;
      
      if (this.typ == "dunkel") {
        var m_rot = Math.round(this.verh_rot * x);
        var m_gruen = Math.round(this.verh_gruen * x);
        var m_blau = Math.round(this.verh_blau * x);
      } else {
        var m_rot = this.gross_rot + Math.round(this.verh_rot * x);
        var m_gruen = this.gross_gruen + Math.round(this.verh_gruen * x);
        var m_blau = this.gross_blau + Math.round(this.verh_blau * x);
      }
      
      if (m_rot < 1) m_rot = 1;
      if (m_gruen < 1) m_gruen = 1;
      if (m_blau < 1) m_blau = 1;
      if (m_rot > 256) m_rot = 256;
      if (m_gruen > 256) m_gruen = 256;
      if (m_blau > 256) m_blau = 256;
      
      //globale Farbwerte aendern
      window["rot"] = m_rot - 1; 
      window["gruen"] = m_gruen - 1; 
      window["blau"] = m_blau - 1; 
      
    },
    groesstes_verh:function() {
      if (this.verh_rot >= this.verh_gruen && this.verh_rot >= this.verh_blau) {
        return "verh_rot";
      } else if (this.verh_gruen >= this.verh_rot && this.verh_gruen >= this.verh_blau) {
        return "verh_gruen";
      } else {
        return "verh_blau";
      }
    },
    sort_letters:function(a, b) {
      if (a == "r" || (a == "g" && b == "b")) return a + b;
      else return b + a;
    },
    groesste_farbe:function() {
      if (rot > gruen && rot > blau) {
        return "rot";
      } else if (gruen > rot && gruen > blau) {
        return "gruen";
      } else if (rot == gruen && rot == blau) {
        return "rot";
      } else if (rot > gruen && rot == blau) {
        return "rot";
      } else if (rot > blau && rot == gruen) {
        return "rot";
      } else if (gruen > rot && gruen == blau) {
        return "gruen";
      } else if (gruen > blau && gruen == rot) {
        return "gruen";
      } else {
        return "blau";
      }
    },
    kleinste_farbe:function() {
      if (rot < gruen && rot < blau) {
        return "rot";
      } else if (gruen < rot && gruen < blau) {
        return "gruen";
      } else if (rot == gruen && rot == blau) {
        return "gruen";
      } else if (rot < gruen && rot == blau) {
        return "rot";
      } else if (rot < blau && rot == gruen) {
        return "rot";
      } else if (gruen < rot && gruen == blau) {
        return "gruen";
      } else if (gruen < blau && gruen == rot) {
        return "gruen";
      } else {
        return "blau";
      }
    },
    mittlere_farbe:function() {
      if (this.kleinste_farbe() != "rot" && this.groesste_farbe() != "rot") {
      return "rot" ;
      } else if (this.kleinste_farbe() != "gruen" && this.groesste_farbe() != "gruen") {
      return "gruen" ;
      } else {
      return "blau" ;
      }
    },
    set_opacity:function() {
      if(!this.is_aktiv()) {
        var farbe = 0 ;
        
        var g = this.groesste_farbe() ;
        var gross = eval('this.gross_' + g) - 1 ;
        var g_kurz = g.substring(0,1) ;
        var m = this.mittlere_farbe() ;
        var mittel = eval('this.gross_' + m) - 1 ;
        var m_kurz = m.substring(0,1) ;
        var k = this.kleinste_farbe() ;
        var klein = eval('this.gross_' + k) - 1 ;
        var k_kurz = k.substring(0,1) ;
        
        
        document.getElementById(this.id + "_" + g_kurz).style.display = 'block' ;
        document.getElementById(this.id + "_" + m_kurz).style.display = 'none' ;
        document.getElementById(this.id + "_" + k_kurz).style.display = 'none' ;
        document.getElementById(this.id + "_" + this.sort_letters(g_kurz, m_kurz)).style.display = 'block' ;
        document.getElementById(this.id + "_" + this.sort_letters(k_kurz, g_kurz)).style.display = 'none' ;
        document.getElementById(this.id + "_" + this.sort_letters(m_kurz, k_kurz)).style.display = 'none' ;
        
        if (this.typ == "hell") {
          farbe = (gross-mittel) / (255-mittel) ;
          set_css_opacity(this.id + "_" + g_kurz, farbe) ;
          set_css_opacity(this.id + "_" + this.sort_letters(g_kurz, m_kurz), mittel/255) ;
        } else {
          document.getElementById(this.id + "_rgb").style.display = 'block' ;
          
          set_css_opacity(this.id + "_" + g_kurz, 1) ;
          farbe = (mittel-klein) / (255-klein) ;
          set_css_opacity(this.id + "_" + this.sort_letters(g_kurz, m_kurz), farbe) ;
          set_css_opacity(this.id + "_rgb", klein/255) ;
        }
        
        document.getElementById(this.id + "_" + g_kurz).style.zIndex = 2 ;
        document.getElementById(this.id + "_" + this.sort_letters(g_kurz, m_kurz)).style.zIndex = 3 ;
      }
    },
    x_move_zeiger:function() {
      if (this.typ == "dunkel") {
        var x = Math.round(this[this.groesstes_verh()] * (window[groesste_farbe()] + 1) - 1);
      } else {
        var x = Math.round(this[this.groesstes_verh()] * (window[kleinste_farbe()] + 1) - 1);
      }
      document.getElementById(this.zeiger.id).style.left = (x - this.zeiger.left) + "px";
    },
    deaktivieren:function() {
      this.aktiv = "n";
      werte_aendern(); //globale Funktion
    },
    click:function(e) {
      this.x_zu_farbe(e);
      nichtLetzter();
      this.letzter = true;
      werte_aendern();//globale Funktionen
      //Piwik-tracking
      piwikTracking() ;
    },
    move:function(e) {
      if(this.is_aktiv()) {
        this.x_zu_farbe(e);
        nichtLetzter();
        this.letzter = true;
        werte_aendern(); //globale Funktion
      }
    }
  }
  
//allgemeine Klasse fuer die Felder
function Feld(id, farbe) {
  this.id = id;
  this.farbe = farbe;
}
  Feld.prototype={
    is_int:function(zahl) {
      if (isNaN(zahl)) {
        return false;
      } else {
        return true;
      }
    },
    eingabe:function() {
      var eingabe = document.getElementById(this.id).value;
      if (eingabe != "" && window[this.farbe]+'' != eingabe) {
        nichtLetzter();
        eingabe = parseInt(eingabe);
        if(this.is_int(eingabe)) {
          if (eingabe > 255) {
            eingabe = 255;
          } else if (eingabe < 0) {
            eingabe = 0;
          }
        } else {
          eingabe = 0;
        }
        window[this.farbe] = eingabe; //globalen Farbwert aendern
        werte_aendern(); //globale Funktionen
        //Piwik-tracking
        piwikTracking() ;
      }    
    }
  }  

//allgemeine Klasse fuer die Farbtoepfe
function Topf(id) {
  this.id = id;
  this.rot = 0;
  this.gruen = 0;
  this.blau = 0;
}
  Topf.prototype={
    speichern:function(r, g, b) {
      this.rot = r;
      this.gruen = g;
      this.blau = b;
      document.getElementById(this.id).style.backgroundColor = "rgb(" + this.rot + ", " + this.gruen + ", " + this.blau + ")";
    },
    deaktivieren:function() {
      document.getElementById(this.id).style.borderColor = "#000000";
    },
    aktivieren:function() {
      topf.deaktivieren(); //alten topf deaktivieren
      topf = this;
      document.getElementById(this.id).style.borderColor = "#ffffff";
      //globale Farbwerte aendern
      window["rot"] = this.rot;
      window["gruen"] = this.gruen;
      window["blau"] = this.blau;
      //globale Funktionen
      nichtLetzter();
      werte_aendern();
      //Piwik-tracking
      piwikTracking() ;
    }
  }

/***VARIABLEN***/
//globale Variablen
  var rot = 0;
  var gruen = 0;
  var blau = 0;
  var wuerfelfarbe = "blau";
  
//Objekte
var kreuz = new Zeiger("kreuz", 6, 6);
var pfeil_rot = new Zeiger("pfeilr", 3);
var pfeil_gruen = new Zeiger("pfeilg", 3);
var pfeil_blau = new Zeiger("pfeilb", 3);
var pfeil_hell = new Zeiger("pfeilh", 3);
var pfeil_dunkel = new Zeiger("pfeild", 3);

var wuerfel = new Schieber(new Array("alles", "wuerfel_box"), kreuz, "rot", "gruen", new Array(), new Array(wuerfelfarbe), "variation_verlauf");

var balken_rot = new Schieber(new Array("alles", "balken_box", "dbr"), pfeil_rot, "rot", "", new Array("balkenr_g", "balkenr_b"), new Array("gruen", "blau"), "balkenr_gb");
var balken_gruen = new Schieber(new Array("alles", "balken_box", "dbg"), pfeil_gruen, "gruen", "", new Array("balkeng_r", "balkeng_b"), new Array("rot", "blau"), "balkeng_rb");
var balken_blau = new Schieber(new Array("alles", "balken_box", "dbb"), pfeil_blau, "blau", "", new Array("balkenb_r", "balkenb_g"), new Array("rot", "gruen"), "balkenb_rg");

var balken_hell = new hdSchieber(new Array("alles", "balken_box", "dbh"), pfeil_hell, "hell", "balkenh");
var balken_dunkel = new hdSchieber(new Array("alles", "balken_box", "dbd"), pfeil_dunkel, "dunkel", "balkend");

var feld_rot = new Feld("rot", "rot");
var feld_gruen = new Feld("gruen", "gruen");
var feld_blau = new Feld("blau", "blau");

var farbtopf1 = new Topf("farbtopf1");
var farbtopf2 = new Topf("farbtopf2");

var topf = farbtopf1;
var topf_anzahl = 2;


/***FUNKTIONEN***/

function diese_farbe(r, g, b) {
  //globale Farbwerte aendern
  window["rot"] = r;
  window["gruen"] = g;
  window["blau"] = b;
  //globale Funktionen
  nichtLetzter();
  werte_aendern();
  //Piwik-tracking
  piwikTracking() ;
}

function groesste_farbe() {
  if (rot >= gruen && rot >= blau) {
    return "rot";
  } else if (gruen >= rot && gruen >= blau) {
    return "gruen";
  } else {
    return "blau";
  }
}
function kleinste_farbe() {
  if (rot <= gruen && rot <= blau) {
    return "rot";
  } else if (gruen <= rot && gruen <= blau) {
    return "gruen";
  } else {
    return "blau";
  }
}

function wuerfel_drehen(f1, f2, f3) {
  wuerfel.xfarbe = f1;
  wuerfel.yfarbe = f2;
  wuerfelfarbe = f3;
  wuerfel.vfarben = Array(wuerfelfarbe);
  document.getElementById("dreh").onclick = new Function("wuerfel_drehen('" + f3 + "', '" + f1 + "', '" + f2 + "')");
  document.getElementById("verlauf").style.backgroundImage = "url('verlauf.php?farbe=" + wuerfelfarbe + "&f=0')";
  document.getElementById("variation_verlauf").style.backgroundImage = "url('verlauf.php?farbe=" + wuerfelfarbe + "&f=255')";
  
  var i = document.getElementById("x-achse").innerHTML;
  document.getElementById("x-achse").innerHTML = document.getElementById("y-achse").innerHTML;
  document.getElementById("y-achse").innerHTML = document.getElementById("z-achse").innerHTML;
  document.getElementById("z-achse").innerHTML = i;
  
  werte_aendern();
  //Piwik-tracking
  piwikTracking() ;
}

//Funktionen fuer alle
function werte_aendern() {
  //Tiefenberechnung
  var pixel = Math.round((window[wuerfelfarbe] + 1) * 91 / 256);
  
  document.getElementById("durchsichtig").style.left = 27 + pixel + "px";
  document.getElementById("durchsichtig").style.top = 92 - pixel + "px";
  document.getElementById("wuerfel_box").style.left = 27 + pixel + "px";
  document.getElementById("wuerfel_box").style.top = 91 - pixel + "px";
  
  //Zeiger aendern
  wuerfel.x_move_zeiger();
  wuerfel.kehr_y_move_zeiger();
  
  balken_rot.x_move_zeiger();
  balken_gruen.x_move_zeiger();
  balken_blau.x_move_zeiger();
  
  balken_hell.x_move_zeiger();
  balken_dunkel.x_move_zeiger();
  
  //Werte in den inputs
  document.werte.rot.value = rot; 
  document.werte.gruen.value = gruen; 
  document.werte.blau.value = blau;

  //Hexadezimalwert
  hex_werte(rot,gruen,blau);
  
  //Aendern des Farbtopfes
  topf.speichern(rot, gruen, blau);
  
  //Opacity aendern
  balken_rot.set_opacity();
  balken_gruen.set_opacity();
  balken_blau.set_opacity();
  wuerfel.set_opacity();
  
  //Helldunkel
  if (!balken_hell.letzter) {
    balken_hell.verhaeltnisse();
    balken_hell.set_opacity();
  }
  if (!balken_dunkel.letzter) {
    balken_dunkel.verhaeltnisse();
    balken_dunkel.set_opacity();
  }
}

function set_css_opacity(id, wert) {
  document.getElementById(id).style.opacity = wert ;
  document.getElementById(id).style.filter = wert*100 ; // IE
}

function deaktivieren() {
  wuerfel.deaktivieren();
  balken_rot.deaktivieren();
  balken_gruen.deaktivieren();
  balken_blau.deaktivieren();
  balken_hell.deaktivieren();
  balken_dunkel.deaktivieren();
  werte_aendern();
}
function move(e) {
  wuerfel.move(e);
  balken_rot.move(e);
  balken_gruen.move(e);
  balken_blau.move(e);
  balken_hell.move(e);
  balken_dunkel.move(e)
}
function nichtLetzter() {
  wuerfel.letzter = false;
  balken_rot.letzter = false;
  balken_gruen.letzter = false;
  balken_blau.letzter = false;
  balken_hell.letzter = false;
  balken_dunkel.letzter = false;
}
function hex_werte(r,g,b) {
  var hex_r = r.toString(16);
  var hex_g = g.toString(16);
  var hex_b = b.toString(16);

  if (hex_r.length == 1) { hex_r = "0" + hex_r; }
  if (hex_g.length == 1) { hex_g = "0" + hex_g; }
  if (hex_b.length == 1) { hex_b = "0" + hex_b; }
  
  if (document.werte.hex.value != hex_r + hex_g + hex_b) {
    document.werte.hex.value = hex_r + hex_g + hex_b;
  }
}

function neuer_farbtopf() {
  if (topf_anzahl <= 10) {
    if (topf_anzahl == 10) {
      document.getElementById("plus").style.display = "none";
    }
    document.getElementById("farbtopf" + topf_anzahl).className = "mitte";
    topf_anzahl++;
    document.getElementById("farbtoepfe").style.width = (topf_anzahl * 49 + 2) + "px";
    document.getElementById("farbtoepfe").innerHTML += 
      '<div id="farbtopf' + topf_anzahl + '" class="rechts" style="background-color:#000000;" onclick="farbtopf' + topf_anzahl + '.aktivieren()">&nbsp;</div>';
    window["farbtopf" + topf_anzahl] = new Topf("farbtopf" + topf_anzahl);
    //Piwik-tracking
    piwikTracking() ;
  }
}

//Hexwerte lesen
function hex_aendern() {
  var eingabe = document.werte.hex.value;
  
  if (eingabe.length == 6) {
    rot = parseInt((eingabe.charAt(0) + eingabe.charAt(1)), 16);
    gruen = parseInt((eingabe.charAt(2) + eingabe.charAt(3)), 16);
    blau = parseInt((eingabe.charAt(4) + eingabe.charAt(5)), 16);
	
	  if(isNaN(rot)) { rot = 0; }
	  if(isNaN(gruen)) { gruen = 0; }
	  if(isNaN(blau)) { blau = 0; }	  
    
	  werte_aendern();
	  //Piwik-tracking
	  piwikTracking() ;
  }	  
}

//Piwik-tracking
function piwikTracking() {
  var pkBaseURL = (("https:" == document.location.protocol) ? "https://chris-voss.de/piwik/" : "http://chris-voss.de/piwik/");
  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
  piwikTracker.trackPageView();
}