// -----------------------------------------------------------------------------------------------------------------
 // Funktion zum Sliden eines Containers
 // - MIT-License
 // - Funktions-Beschreibung
 // - Parameter-Definition
 // - Bekannte Einbindungen
 // - Beispiel: jQuery latest (head)
 // - Beispiel: CSS (head)
 // - Beispiel: HTML (body)
 // -----------------------------------------------------------------------------------------------------------------
 // Copyright (c) 2009 Andreas Sefzig, KMF online
 // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
 // documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
 // the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and 
 // to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 // The above copyright notice and this permission notice shall be included in all copies or substantial portions of 
 // the Software.
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
 // THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 
 // CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 // IN THE SOFTWARE.
 // -----------------------------------------------------------------------------------------------------------------
 // Bewegt ein HTML-Element (element) um eine bestimmte Anzahl an Pixeln (width) nach links oder rechts
 // (direction) - mit einer recht frei zu wählenden Technik (mode), bisher Facebook-Javascript, normales
 // Javascript und jQuery. Javascript ist default - liegt eine der beiden Libraries vor, sollten diese verwendet
 // werden. jQuery eröaubt sogar eine gebremste Animation. Das bewegte HTML-Element muss in einem Container
 // (Div oder Iframe) mit overflow: hidden liegen. Das CSS muss zum Funktionieren speziell angepasst sein.
 // -----------------------------------------------------------------------------------------------------------------
 // element: Das zu bewegende Element (z.B. 'sliderTrack')
 // width: Wieviele Pixel das Element bewegt werden soll (z.B. '125')
 // direction: In welche Richtung das Element bewegt werden soll (previous | next)
 // ende: Wieviele Slides nach rechts sollen erlaubt werden (z.B. '8')
 // mode: Welche Technik benutzt werden soll (FBJS | JS | JQ)
 // debug: Ob Debugging-Informationen ausgegeben werden sollen (on | off)
 // -----------------------------------------------------------------------------------------------------------------
 // http://apps.facebook.com/kmf-facebook/
 // http://www.connectingbrands.de/cobrands/absatz-1-2/
 // -----------------------------------------------------------------------------------------------------------------
 // <script src="http://code.jquery.com/jquery-latest.js"></script>
 // -----------------------------------------------------------------------------------------------------------------
 // <style type="text/css">
 // #slider { overflow: hidden; width: 690px; height: 139px; margin-left: -5px; border: #000000 0px solid; }
 // #slider { font-family: Helvetica,Tahoma,Arial,sans-serif; font-size: 12px; }
 // .sliderClick { float: left; width: 35px; height: 139px; cursor: pointer; text-align: center; }
 // .sliderButton { margin-top: 50px; }
 // #sliderContainer { float: left; width: 620px; height: 139px; border: #000000 0px dotted; overflow: hidden; }
 // #sliderTrack { width: 10000px; margin: 0px 0px 0px 0px; }
 // .sliderFace { float: left; width: 125px; text-align: center; overflow: hidden; }
 // .sliderFaces { width: 111px; height: 110px; margin-bottom: 10px; border: #000000 0px solid; }
 // </style>
 // -----------------------------------------------------------------------------------------------------------------
 // <div id="slider">
 //   <div class="sliderClick" onclick="sliderMove('sliderTrack','JQ','previous','125','0','off'); return false;">
 //     <img class="sliderButton" src="previous.gif"  width="18"  height="12" border="0" />
 //   </div>
 //   <div id="sliderContainer">
 //     <div id="sliderTrack">
 //       <div class="sliderFace"><a href="0.html" target="_blank"><img class="sliderFaces" src="0.gif" /></a>0</div>
 //       <div class="sliderFace"><a href="1.html" target="_blank"><img class="sliderFaces" src="1.gif" /></a>1</div>
 //       <div class="sliderFace"><a href="2.html" target="_blank"><img class="sliderFaces" src="2.gif" /></a>2</div>
 //       <div class="sliderFace"><a href="3.html" target="_blank"><img class="sliderFaces" src="3.gif" /></a>3</div>
 //       <div class="sliderFace"><a href="4.html" target="_blank"><img class="sliderFaces" src="4.gif" /></a>4</div>
 //       <div class="sliderFace"><a href="5.html" target="_blank"><img class="sliderFaces" src="5.gif" /></a>5</div>
 //       <div class="sliderFace"><a href="6.html" target="_blank"><img class="sliderFaces" src="6.gif" /></a>6</div>
 //       <div class="sliderFace"><a href="7.html" target="_blank"><img class="sliderFaces" src="7.gif" /></a>7</div>
 //       <div class="sliderFace"><a href="8.html" target="_blank"><img class="sliderFaces" src="8.gif" /></a>8</div>
 //       <div class="sliderFace"><a href="9.html" target="_blank"><img class="sliderFaces" src="9.gif" /></a>9</div>
 //     </div>
 //   </div>
 //   <div class="sliderClick" onclick="sliderMove('sliderTrack','JQ','next','125','3100','off'); return false;">
 //     <img class="sliderButton" src="next.gif"  width="18"  height="12" border="0" />
 //   </div>
 // </div>
 // -----------------------------------------------------------------------------------------------------------------
 
    function sliderMove(element,mode,direction,width,ende,debug)
    {
    // Konfiguration: Defaults
       var modeDefault = "JS";  // FBJS | JS | JQ
       var debuggen =    "off"; // on | off
       
    // Debug-Sting beginnen
       var debugString = "Degugging: "+debuggen+"\n";
       var debugString = debugString+"Modus: "+mode+"\n";
       var debugString = debugString+"Element: "+element+"\n";
       var debugString = debugString+"Richtung: "+direction+"\n";
       var debugString = debugString+"Strecke: "+width+"\n";
       var debugString = debugString+"Ende: "+ende+"\n";
    
    // Defaults setzen wenn nötig
       if ((!mode) || (mode == ""))
       {
          var mode = modeDefault;
       }
       if ((debug) && (debug != ""))
       {
          var debuggen = debug;
       }
       
    // HTML-Objekt
       var track = document.getElementById(element);
       
    // Aktuelle Position bestimmen
       if (mode == "FBJS")
       {
       // In Facebook-Javascript
          var position = track.getStyle('margin');
       }
       if (mode == "JS")
       {
       // In normalem Javascript
          var position = track.style.margin;
       }
       if (mode == "JQ")
       {
       // In jQuery
          var position = jQuery("#"+element).css("marginLeft");
          var position = "0px 0px 0px "+position+"px";
       }
       var debugString = debugString+"Position aktuell CSS: "+position+"\n";
       
    // Aktuelle Margin-Positionen bestimmen
       var positions = position.split("px");
       var position0 = positions[0]; if ((!position0) || (position0 == "")) { var position0 = "0"; }
       var position1 = positions[1]; if ((!position1) || (position1 == "")) { var position1 = "0"; }
       var position2 = positions[2]; if ((!position2) || (position2 == "")) { var position2 = "0"; }
       var position3 = positions[3]; if ((!position3) || (position3 == "")) { var position3 = "0"; }
       var debugString = debugString+"Vollständige aktuelle Margins:\nmargin-top: "+position0+"\nmargin-right: "+position1+"\nmargin-bottom: "+position2+"\nmargin-left: "+position3+"\n";
       
    // Aktuelle Position zu Zahl wandeln
       var position = position3;
       var position = parseInt(position);
       var debugString = debugString+"Position aktuell Zahl: "+position+"\n";
       
    // Wenn keine Position ermittelt werden konnte, '0' einsetzen
       if ((!position) || (position == ""))
       {
          var position = 0;
          var debugString = debugString+"Keine Position vorhanden!\n";
       }
       else
       {
          var position = position;
          var debugString = debugString+"Position vorhanden: "+position+"\n";
       }
       
    // Je nach Richtung neue Position bestimmen
       if (direction == "previous")
       {
       // Aktuelles Margin plus zu bewegende Pixel
          var positionNew = position - (width * -1);
          var debugString = debugString+"Richtung Previous aktualisiert\n";
       }
       else if (direction == "next")
       {
       // Aktuelles Margin minus zu bewegende Pixel
          var positionNew = position - width;
          var debugString = debugString+"Richtung Next aktualisiert\n";
       }
       else
       {
          var debugString = debugString+"Keine Richtung angegeben. Richtung nicht aktualisiert!\n";
       }
       
    // Abbrechen, wenn Anfang oder Ende erreicht          
       if (direction == "previous")
       {
       // Abbrechen, wenn Anfang erreicht
          var positionNewNegativ = positionNew * "-1";
          var debugString = debugString+"Errechnetes Ende: "+positionNewNegativ+", maximales Ende: "+ende+"\n";
             
          if (positionNewNegativ < ende)
          {
          // Abbrechen
             var abbrechen = "ja";
             var debugString = debugString+"Wird abbrechen weil zu weit.\n";
          }
       }       
       else if (direction == "next")
       {
       // Abbrechen, wenn Ende erreicht
          var positionNewNegativ = positionNew * "-1";
          var debugString = debugString+"Errechnetes Ende: "+positionNewNegativ+", maximales Ende: "+ende+"\n";
             
          if (positionNewNegativ > ende)
          {
          // Abbrechen
             var abbrechen = "ja";
             var debugString = debugString+"Wird abbrechen weil zu weit.\n";
          }
       }
       
    // Neue Position in CSS formatieren
       var positionNewJq = positionNew+"px";
       var positionNew =   position0+"px "+position1+"px "+position2+"px "+positionNew+"px";
       var debugString =   debugString+"Position neu: "+positionNew+"\n";
       
    // Wenn nicht gestoppt, Modus-abhängig neue Position setzen
       if (abbrechen != "ja")
       {
          if (mode == "FBJS")
          {
             track.setStyle('margin', positionNew);
          }
          if (mode == "JS")
          {
             track.style.margin = positionNew;
          }
          if (mode == "JQ")
          {
       // jQuery("#"+element).css("margin",positionNew);
          jQuery("#"+element).animate({ marginLeft: positionNewJq }, 300, "swing", function(){ jQuery(this).css("margin", positionNew).css("marginLeft", positionNewJq); });
          }
       }
       
    // Debugging
       if (debuggen == "on")
       {
          if ((debugString) && (debugString != ""))
          {
             alert(debugString);
          }
          else
          {
             alert("Es gibt nichts zu debuggen :)");
          }
       }
    }