/*
 * JavaScript Showreel - showreel.js
 * 
 * Konfiguration:
 * Ein grš§erer Wert fŸr srScrollspeed lŠsst das Showreel langsamer scrollen! 
 * Unter srImagepath und srThumbnailpath werden die Pfade zu Bildern und
 * Thumbnails ausgehend von der HTML Datei in der das Showwheel eingebunden
 * ist gesetzt. Im Array srImages einfach die Namen der anzuzeigenden Bilder
 * angeben. Fertig.
 * 
 * Wichtig: Zusammengehšrige Thumbnails und Bilder mŸssen jeweils den gleichen
 *          Dateinamen haben!
 *          
 * Erfolgreich gestestet mit: IE7, IE8, Firefox, Opera, Safari      
 *  
 * @author  Felix Manthey <felix_manthey@web.de>
 * @version 1.0
 * @since   02.08.10
 */   

/* KONFIGURATION */
  var srScrollspeed = 35;
  var srImagepath = 'imgs/dia-big/';
  var srThumbnailpath = 'imgs/thumbs/';
  var srImages = new Array(
      "1.jpg",
      "2.jpg",                                                   
      "3.jpg",
      "4.jpg",
      "5.jpg",
      "6.jpg",
      "11.jpg",
      "12.jpg",
      "13.jpg",
      "14.jpg",
      "15.jpg",
      "16.jpg",
      "17.jpg"
    );
/* KONFIGURATION ENDE */  
  

/* Diese Variablen nicht bearbeiten. */
var srScrollX = -536;
var srMaxScroll = 0;
var srScrolling = true;
var srHighligted = 'srThumbn0';
var srHighligtedClone = false;
setTimeout('srInitialize();', 50);

/* Grš§en der scrollenden Div Container auf Bildermenge anpassen. Mit Scrollen anfangen */ 
function srInitialize() {
  srDrawShowreel();
  srMaxScroll = (srImages.length + 4) * 67
  document.getElementById('srThumbScroller').style.width = srMaxScroll + 'px';
  document.getElementById('srImage').src = srImagepath + srImages[0];
  document.getElementById(srHighligted).className = 'srThumb border';  
  setTimeout('srScroll(' + srScrollX + ');', 1);
}

/* Wieder mit Scrollen anfangen */
function srStart() {
  if (!srScrolling) {
    srScrolling = true;
    setTimeout('srScroll(' + srScrollX + ');', 0);
  }
}

/* Showreel anhalten, Highlight setzen und großes Bild Šndern. */
function srStop(hoveredImage) { 
  //Thumbnail Highlight aufheben. Eventuell bestehendes Klon Highlight aufheben                               
  document.getElementById(srHighligted).className = 'srThumb';
  if (srHighligtedClone) {                               
    document.getElementById(srHighligtedClone).className = 'srThumb';
  }

  //Neues gehighlightetes Bild setzen, erstmal davon ausgehen, dass es nicht doppelt da ist.
  srHighligted = 'srThumbn' + hoveredImage;
  document.getElementById(srHighligted).className = 'srThumb border';
  srHighligtedClone = false;
  
  //Falls es sich um eines der 4 doppelten Bilder handelt auch den Klon highlighten 
  if (hoveredImage >= srImages.length - 4) {
    srHighligtedClone = 'srThumbc' + hoveredImage;             
    document.getElementById(srHighligtedClone).className = 'srThumb border';
  }
 
  document.getElementById('srImage').src = srImagepath + srImages[hoveredImage]; //Gro§es Bild Šndern 
  srScrolling = false;  //Showreel anhalten
}

/* Scrolle das Showreel von links nach rechts. Wird intervallartig aufgerufen. */
function srScroll(scrollcheck) { 
  if (srScrolling && scrollcheck == srScrollX) {
    ++srScrollX;
    if (srScrollX > 0) {
      srScrollX = 268 - srMaxScroll;
    }
    document.getElementById('srThumbScroller').style.marginLeft = srScrollX + 'px';
  
    setTimeout('srScroll(' + srScrollX + ');', srScrollspeed);
  }
}

/* Schreibe die Bilder aus dem Array als HTML in das Showreel */
function srDrawShowreel() {
  for (var i = srImages.length - 1;i >= -4; --i) {
    //Handelt es sich um ein Bild welches gerade doppelt erzeugt wird?
    if (i < 0) {
      var j = srImages.length + i; //Index entsprechend anpassen.
    } else {
      var j = i; 
    }
    
    var a = document.createElement('a'); //Link erzeugen
    a.href = 'javascript:void(0);'; //Er soll nirgendwo hinzeigen 
    
    //Mouseover und Mouseout Events zuweisen.
    a.setAttribute('onmouseover', 'srStop(' + j + ');'); //Für jeden Browser
    if (a.attachEvent) { //Auch für den Extrawurst Explorer
        a.attachEvent('onmouseover', srIEworkaround); 
    }
    a.onmouseout = function() {srStart();}; //Mouseout erzeugen
    
    //Thumbnail erzeugen 
    var img = document.createElement('img'); //Thumbnail erzeugen
    img.src= srThumbnailpath + srImages[j];
    if (j != i) {
      img.id = 'srThumbc' + j;
    } else {
      img.id = 'srThumbn' + j;
    }                         
    img.className = 'srThumb';
    a.appendChild(img);
    
    document.getElementById('srThumbScroller').appendChild(a);  
  }
}

/*
 * Fummelt aus dem Ÿbergebenen Event den Index des auslšsenden Bildes raus.
 * Normalerweise ist das eine komplizierte Lšsung fŸr ein einfach zu lšsendes
 * Problem. Aber hey. Internet Explorer machts mšglich...
 */ 
function srIEworkaround(event) {
  if (event.target) { //Normaler Browser
      var element = event.target;
  } else if (event.srcElement) { //Extrawurst Explorer
      var element = event.srcElement;
  }
  srStop(element.id.substring(8,element.id.length));
}