// $Id: slides.js 1156 2012-02-16 12:54:07Z be $

function getElementsByClass( tagName, className ) {
  var els = document.getElementsByTagName( tagName );
  return filterClass( els, className );
}
function filterClass( els, className ) {
  var ret = [];
  for( var el in els ) {
    if( els[el].className ) {

      var classNames = els[el].className.split( " " );

      for( var i in classNames ) {
        if( classNames[i] == className ) {
          ret.push( els[ el ] );
          break;
        }
      }

    }

  }

  return ret;
}

/*
function debug( str ) {
  var el = document.getElementById( "debug" );
  if( el )
    el.innerHTML += str + "<br/>";
}
*/

var pres = [];
var presLoaded = 0;

function preloaded( img ) {

  presLoaded++;

  if( presLoaded == pres.length )
    for( var show in slideShows )
      slideShows[ show ].ready();

}

function preloadShutter( src ) {

  var img = document.createElement( "img" );
  img.onload = function() { preloaded( this ); }
  img.src = src

  pres.push( src );

}

var shutterUrlLeft = "img/shutter_left.png";
var shutterUrlMid = "img/shutter_mid.png";
var shutterUrlRight = "img/shutter_right.png";

function SlideShow( el, slideWidth, slideHeight, index ) {

  this.el = el;
  this.slides = [];
  this.boxes = [];

  this.elContainer = null;

  this.slideWidth = slideWidth;
  this.slideHeight = slideHeight;
  this.interval = 10000;

  this.shutterLeftWidth = 100;
  this.shutterRightWidth = 100;
  this.shutterWidth = this.slideWidth + this.shutterLeftWidth + this.shutterRightWidth;
  this.shutterPos = -this.shutterWidth;
  this.speed = ( this.slideWidth + this.shutterRightWidth ) / 10;

  this.currentSlide = 0;
  this.nextSlide = 1;

  this.init = function() {

    // create inner part
    this.elInner = document.createElement( "div" );
    this.elInner.className = "inner";

    this.elInner.style.overflow = "hidden";
    this.elInner.style.width = this.slideWidth + "px";
    this.elInner.style.height = this.slideHeight + "px";
    this.elInner.style.marginLeft = "-3px";
    //this.elInner.style.border = "1px solid blue";

    this.elInner.show = this;
    this.elInner.onmouseover = function() {
      clearTimeout( this.show.refreshT );
    }
    this.elInner.onmouseout = function() {
      this.show.refreshTimeout();
    }

    this.el.appendChild( this.elInner );

    // create boxes
    this.elBoxes = document.createElement( "div" );
    this.elBoxes.className = "boxes";

    this.elBoxes.style.display = "none";
    this.elBoxes.style.marginTop = "3px";
    //this.elBoxes.style.border = "1px solid red";

    this.el.appendChild( this.elBoxes );

    // create container
    this.elContainer = document.createElement( "div" );
    this.elContainer.className = "container";
    //this.elContainer.style.border = "1px solid green";
    this.elContainer.style.width = ( this.slides.length * this.slideWidth ) + "px";
    this.elContainer.style.height = this.slideHeight + "px";
    this.elContainer.style.cssFloat = "left";
    this.elContainer.style.styleFloat = "left";
    this.elContainer.style.overflow = "visible";

    this.elContainer.style.position = "relative";
    this.elContainer.style.top = "0px";
    this.elContainer.style.left = "0px";

    this.elContainer.style.paddingLeft = "3px";

    this.elInner.appendChild( this.elContainer );

    // create shutter
    this.elShutter = document.createElement( "div" );
    this.elShutter.className = "shutter";
    this.elShutter.style.width = this.shutterWidth + "px";
    this.elShutter.style.height = this.slideHeight + "px";
    this.elShutter.style.left = this.shutterPos + "px";
    this.elShutter.style.top = (-this.slideHeight) + "px";
    this.elShutter.style.position = "relative";
    this.elInner.appendChild( this.elShutter );

    var elShutterLeft = document.createElement( "div" );
    elShutterLeft.className = "left";
    elShutterLeft.style.width = this.shutterLeftWidth + "px";
    elShutterLeft.style.height = this.slideHeight + "px";
    elShutterLeft.style.cssFloat = "left";
    elShutterLeft.style.styleFloat = "left";
    elShutterLeft.style.backgroundImage = "url( '" + shutterUrlLeft + "' )";
    elShutterLeft.style.backgroundRepeat = "repeat-y";
    this.elShutter.appendChild( elShutterLeft );

    var elShutterMid = document.createElement( "div" );
    elShutterMid.className = "mid";
    elShutterMid.style.width = this.slideWidth + "px";
    elShutterMid.style.height = this.slideHeight + "px";
    elShutterMid.style.cssFloat = "left";
    elShutterMid.style.styleFloat = "left";
    elShutterMid.style.backgroundImage = "url( '" + shutterUrlMid + "' )";
    elShutterMid.style.backgroundRepeat = "repeat";
    this.elShutter.appendChild( elShutterMid );

    var elShutterRight = document.createElement( "div" );
    elShutterRight.className = "right";
    elShutterRight.style.width = this.shutterRightWidth + "px";
    elShutterRight.style.height = this.slideHeight + "px";
    elShutterRight.style.cssFloat = "left";
    elShutterRight.style.styleFloat = "left";
    elShutterRight.style.backgroundImage = "url( '" + shutterUrlRight + "' )";
    elShutterRight.style.backgroundRepeat = "repeat-y";
    this.elShutter.appendChild( elShutterRight );

    var elShutterClr = document.createElement( "div" );
    elShutterClr.style.clear = "both";
    this.elShutter.appendChild( elShutterClr );

    for( var slide in this.slides ) {

      //this.slides[ slide ].style.border = "1px solid red";
      this.slides[ slide ].style.width = ( this.slideWidth - 2 ) + "px";

      if( slide == this.currentSlide )
        this.slides[ slide ].style.display = "block";
      else
        this.slides[ slide ].style.display = "none";

      // move slide to container
      this.el.removeChild( this.slides[ slide ] );
      this.elContainer.appendChild( this.slides[ slide ] );

      // create a box for slide
      var box = document.createElement( "div" );
      box.className = "box";

      box.style.border = "1px solid #009EE0";
      box.style.backgroundColor = "#ffffff";

      box.style.width = "8px";
      box.style.height = "8px";
      box.style.marginRight = "2px";

      box.style.cssFloat = "left";
      box.style.styleFloat = "left";


      var abox = document.createElement( "a" );

      abox.href = "javascript:void(0);";

      box.abox = abox;
      abox.box = box;
      abox.sl = parseInt( slide );
      abox.show = this;

      abox.funcClick = function() { clearTimeout( this.show.refreshT ); this.show.switchSlide( this.sl ); this.show.refreshTimeout(); }
      abox.funcOver = function() { this.box.style.backgroundColor = "#009EE0"; }
      abox.funcOut = function() { this.box.style.backgroundColor = "#ffffff"; }
      abox.onclick = abox.funcClick;
      abox.onmouseover = abox.funcOver;
      abox.onmouseout = abox.funcOut;

      abox.appendChild( box );
      this.elBoxes.appendChild( abox );

      if( this.slides.length == 1 ) {
        box.style.visibility = "hidden";
      }

      this.boxes[ slide ] = box;

    }

    var boxesClr = document.createElement( "div" );
    boxesClr.style.clear = "both";
    this.elBoxes.appendChild( boxesClr );

    this.showSlide( this.currentSlide );

  }

  this.ready = function() {
    this.elBoxes.style.display = "block";
  }

  this.showSlide = function( index ) {

    this.slides[ this.currentSlide ].style.display = "none";
    this.boxes[ this.currentSlide ].style.border = "1px solid #009EE0";
    this.boxes[ this.currentSlide ].abox.onclick = this.boxes[ this.currentSlide ].abox.funcClick;
    this.boxes[ this.currentSlide ].abox.onmouseover = this.boxes[ this.currentSlide ].abox.funcOver;
    this.boxes[ this.currentSlide ].abox.onmouseout = this.boxes[ this.currentSlide ].abox.funcOut;

    this.currentSlide = index;

    this.slides[ this.currentSlide ].style.display = "block";
    this.boxes[ this.currentSlide ].style.border = "1px solid #172983";
    this.boxes[ this.currentSlide ].style.backgroundColor = "#ffffff";
    this.boxes[ this.currentSlide ].abox.onclick = null;
    this.boxes[ this.currentSlide ].abox.onmouseover = null;
    this.boxes[ this.currentSlide ].abox.onmouseout = null;

  }

  this.switchSlide = function( index ) {

    if( this.currentSlide == index && !animRunning ) {
      return;
    }

    if( this.nextSlide == index && animRunning ) {
      return;
    }

    this.nextSlide = index;
    this.startAnim();
  }

  this.tick = function() {

    if( this.currentSlide == this.slides.length - 1 ) {
      this.switchSlide( 0 );
    } else {
      this.switchSlide( this.currentSlide + 1 );
    }

    this.refreshTimeout();
  }

  this.refreshTimeout = function() {
    var _this = this;

    if( this.slides.length < 2 ) {
      return;
    }

    this.refreshT = setTimeout( function() { _this.tick() }, this.interval );
  }

  this.animRunning = false;
  this.startAnim = function() {
    if( !this.animRunning ) {
      this.doFrame();
      this.animRunning = true;
    }
  }
  this.doFrame = function() {

    this.shutterPos += this.speed

    if( this.shutterPos == -this.shutterLeftWidth )
      this.showSlide( this.nextSlide );

    var _this = this;
    if( this.shutterPos > this.slideWidth ) {
      this.shutterPos = -this.shutterWidth;

      if( this.nextSlide == this.currentSlide ) {
        this.animRunning = false;
      } else {
        setTimeout( function() { _this.doFrame() }, 40 );
      }

    } else {
      setTimeout( function() { _this.doFrame() }, 40 );
    }

    this.elShutter.style.left = this.shutterPos + "px";
  }

}

var slideShows = [];
function initSlideShows() {

  var shows = getElementsByClass( "div", "slideshow" );
  var slides = getElementsByClass( "div", "slide" );

  for( var show in shows ) {

    var w = 200;
    var h = 100;

    if( shows[ show ].style.minWidth.substr( -2 ) == "px" )
      w = parseInt( shows[ show ].style.minWidth.substr( 0, shows[ show ].style.minWidth.length - 2 ) );

    if( shows[ show ].style.minHeight.substr( -2 ) == "px" )
      h = parseInt( shows[ show ].style.minHeight.substr( 0, shows[ show ].style.minHeight.length - 2 ) );

    slideShow = new SlideShow( shows[ show ], w, h )
    slideShows.push( slideShow );

    for( var slide in slides )
      if( slides[ slide ].parentNode == shows[ show ] )
        slideShow.slides.push( slides[ slide ] );

    slideShow.init();

  }

  preloadShutter( shutterUrlLeft );
  preloadShutter( shutterUrlMid );
  preloadShutter( shutterUrlRight );

}