// Globale Variablen
var NAVI = 'modelle';
var WAS  = 0;
var WO   = 0;


function nav(ziel) {

    // Alle Navs auschalten
    $('nav_modelle').className = '';
    $('nav_farben').className = '';
    $('nav_fuellungen').className = '';
    $('nav_griffe').className = '';

    // Die gewählte Nav einschalten
    var id_ziel = 'nav_' + ziel;
    $(id_ziel).className = 'active';

    // Den gewünschten Content nachladen
    var content_datei = 'php/' + ziel + '.php';
    new Ajax.Request(content_datei,
    {
    method:'post',
    onSuccess: function(transport){
      var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
      $('teile').innerHTML = response;

      // Drag & Drop einrichten
      makeDrops();

      // Globale Navi setzen
      NAVI = ziel;
    },
    onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
    });

} // function

// Mootools Dra& Drop
var draggableOptions = {
  onStart:function()
  {
    WAS = this.el.id;
    this.el.setOpacity(.5);
  },
  onComplete:function()
  {
    // put the element back where it belongs
    this.el.setOpacity(1);
    this.el.style.left = 0;
    this.el.style.top = 0;
  }
};

var droppableOptions = {
  onOver:function(){
      this.addClassName('dragover');
  },
  onLeave:function(){
    this.removeClassName('dragover');
  },
  onDrop:function(){
    this.removeClassName('dragover');

    WO = this.id;
    //alert("auf:" + WO);

    var teile =WAS.split('_');

    if (NAVI == 'modelle') {
        switch (teile[2]) {
            case '0': $('tuer_links').className="unsichtbar"; $('tuer_rechts').className="unsichtbar";    break;
            case '1': $('tuer_links').className="sichtbar";   $('tuer_rechts').className="unsichtbar";    break;
            case '2': $('tuer_links').className="unsichtbar"; $('tuer_rechts').className="sichtbar";      break;
            case '3': $('tuer_links').className="sichtbar";   $('tuer_rechts').className="sichtbar";      break;
        } // switch

        new Ajax.Request('php/modelle_rechts.php',
        {
        method:'post',
        parameters: {id: teile[2]},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('span_modell_rechts').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

    } // if

    if (NAVI == 'farben') {

        var farben = new Array("#000000","#ffffff","#cccccc","#4aa629"," #097b3d","#114c38","#dcc38b","#ee924f","#a16f3e","#f16a32","#e62f2b","#c12526","#af734e","#91553b","#5c5a43","#0e78c4","#05539e","#142d56","#363D41","#681637","#855D81","#DCB52B","#E49900");

        var rahmen    = $("tuer_rahmen").style.backgroundColor;
        var innen     = $("tuer_innen").style.backgroundColor;
        var fuellung1 = $("tuer_fuellung").style.backgroundColor;
        var fuellung2 = $("fuellung").style.backgroundColor;

        if (WO != "griff") $(WO).style.background = farben[teile[2]];

        new Ajax.Request('php/farben_rechts.php',
        {
        method:'post',
        parameters: {id: teile[2], platz: WO},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('span_farbe_rechts').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

    } // if

    if (NAVI == 'fuellungen') {
        //alert(teile[2]);

        new Ajax.Request('php/fuellungen_mitte.php',
        {
        method:'post',
        parameters: {id: teile[2]},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('fuellung').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

        new Ajax.Request('php/fuellungen_rechts.php',
        {
        method:'post',
        parameters: {id: teile[2]},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('span_fuellung_rechts').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

    } // if

    if (NAVI == 'griffe') {
        //alert(teile[2]);

        new Ajax.Request('php/griffe_mitte.php',
        {
        method:'post',
        parameters: {id: teile[2]},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('griff').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

        new Ajax.Request('php/griffe_rechts.php',
        {
        method:'post',
        parameters: {id: teile[2]},
        onSuccess: function(transport){
          var response = transport.responseText || "AJAX-Serverfehler: Keine Antwort.";
          $('span_griff_rechts').innerHTML = response;
        },
        onFailure: function(){ alert('AJAX-Serverfehler: Keine Verbindung.') }
        });

    } // if

  }
}

function makeDrops()
{
    var dropitems = document.getElementsBySelector('.sichtbar');
    dropitems.each(function(drop){ drop.extend(droppableOptions)   });

    draggableOptions.droppables = dropitems;

    var dragitems = document.getElementsBySelector('.items');
    dragitems.each(function(draggi){ draggi.addClassName('drag').makeDraggable(draggableOptions)   });

}

window.onload=function()
{
    var dropitems = document.getElementsBySelector('.sichtbar');
    dropitems.each(function(drop){ drop.extend(droppableOptions)   });

    draggableOptions.droppables = dropitems;

    var dragitems = document.getElementsBySelector('.items');
    dragitems.each(function(drag){ drag.addClassName('drag').makeDraggable(draggableOptions)   });

}