var slideshow = null;

/*!
 *\class SlideShowItem
 *\brief Stores the main slide show items information
 */
function SlideShowItem(title, desc, imgs, imgl) {
  this.title  = title;
  this.desc   = desc;
  this.imgs   = imgs;
  this.imgl   = imgl;
}

/*!
 *\class SlideShowOptions
 *\brief The slide show options
 */
var SlideShowOptions = {
  cbocbi: null,
  thumbw: 32,
  thumbh: 32,
  hspace: 1,
  vspace: 1,
  icpr:   5,
  border: 1,
  nhibc:  '#dddddd',
  hvibc:  '#000000'
};

/*!
 *\class SlideShow
 *\brief Runs the slide show
 */
function SlideShow()
{
  this.items             = new Array();              /* The image array */
  this.onbic             = SlideShowOptions.cbocbi;  /* The onClickBigImage callback function */
  this.thumbnailWidth    = SlideShowOptions.thumbw;
  this.thumbnailHeight   = SlideShowOptions.thumbh;
  this.hspace            = SlideShowOptions.hspace;
  this.vspace            = SlideShowOptions.vspace;
  this.itemcountperrow   = SlideShowOptions.icpr;
  this.itemborder        = SlideShowOptions.border;
  this.itemborderoffset  = this.itemborder * 2; //new Browser().isIE() ? 0 : (this.itemborder * 2);
  this.nhitembordercolor = SlideShowOptions.nhibc;
  this.hvitembordercolor = SlideShowOptions.hvibc;

  /* Set the global variable */
  slideshow = this;
  
  /*!
   *\fn begin
   *\brief Launches the slide show
   */
  this.begin = function()
  {
    /* Parse the file and create the image list */
    var container = document.getElementById("slideshow_content");
    var divs  = container.getElementsByTagName("div");
    var index = 0;
    for(index = 0; index < divs.length; index++) {
      var div = divs[index];
      if(div.className == "slideshow_item") {
        var title   = div.getElementsByTagName("h1")[0].innerHTML;
        var desc    = div.getElementsByTagName("h2")[0].innerHTML;
        var imga    = div.getElementsByTagName("img");
        var imgi = 0, imgs = null, imgl = null;
        for(imgi = 0; imgi < imga.length; imgi++) {
          switch(imga[imgi].className) {
          case "small":   imgs = imga[imgi].src; break;
          case "large":   imgl = imga[imgi].src; break;
          }
        }
        this.items[this.items.length] = new SlideShowItem(title, desc, imgs, imgl);
      }
    }

    // Construct the following node tree
    //  <div id="show">
    //    <div id="show_images">
    //      <div id="img1" style="display: none"></div>
    //    </div>
    //    <div class="show_details">
    //      <span id="show_item_title">title</span><br>
    //      <span id="show_item_description">description</span>
    //    </div>
    //    <div class="show_carousel">
    //      <div id="left_hand"></div>
    //      <div id="carousel">
    //        <div id="carousel_inner">
    //        </carousel_inner>
    //      </carousel>
    //      <div id="right_hand"></div>
    //    </div>
    //  </div>
    var objBody = $('slideshow_show_container');
		objBody.appendChild(Builder.node('div', {id:'show'}, [
      Builder.node('div', {id:'show_images'}, [
        Builder.node('div',{id:'img1', style:'display:none'})
      ]), 
      Builder.node('div',{id:'show_details'}, [
        Builder.node('div', {id:'show_item_title'}),
        Builder.node('div', {id:'show_item_description'})
      ]),
      Builder.node('div',{id:'show_carousel'}, [
        Builder.node('div', {id:'left_hand'}),
        Builder.node('div', {id:'carousel'}, [
          Builder.node('div', {id:'carousel_inner'})
        ]),
        Builder.node('div', {id:'right_hand'})
      ])
    ])); 

    /* Append the small images to the carousel */
    var objCarousel = $('carousel_inner');
    for(index = 0; index < this.items.length; index++) {
      var imgid = 'thumbnail' + index;
      var top   =  parseInt( index / this.itemcountperrow ) * ( this.vspace + this.thumbnailHeight + this.vspace) - (index * (this.thumbnailHeight + this.itemborderoffset)) + this.vspace;
      var left  =  ( index % this.itemcountperrow ) * (this.hspace + this.thumbnailWidth + this.hspace) + this.hspace;
      var style_str = "";
      style_str += 'position: relative;';
      style_str += 'top:' + top + 'px;';
      style_str += 'left:' + left + 'px;';
      style_str += 'height:' + this.thumbnailHeight + 'px;';
      style_str += 'width:' + this.thumbnailWidth + 'px;';
      style_str += 'cursor: pointer;';
      style_str += 'background: url(' + this.items[index].imgs + ') no-repeat center center;';
      style_str += 'border: ' + this.itemborder + 'px solid ' + this.nhitembordercolor + ';';
      objCarousel.appendChild( 
        Builder.node('div', {
          id: imgid, 
          style: style_str,
          onclick: "slideshow.onThumbnail(" + index + ");",
          onmouseover: "this.style.border = '" + this.itemborder + "px solid " + this.hvitembordercolor + "';",
          onmouseout: "this.style.border = '" + this.itemborder + "px solid " + this.nhitembordercolor + "';"
        })
      );
    }

    /* Observe the clickings */
    $('show_images').observe('click', ( 
      function() {
        if(this.selected >= 0) 
          this.onbic(this.selected);
      }
    ).bind(this));
    
    /* Awful Patch IE 8!!!!! */
    var browser = new Browser();
    if(browser.isIE()) {
      $('show').style.left = '0px';
    }
  }

  /*!
   *\fn onThumbnail
   *\brief Called when a thumbnail has been clicked
   */
  this.onThumbnail = function(imgindex) {
    /* Set the selected image */
    this.selected = imgindex;

    /* Change the big image */
    $('show_images').style.background = "url(" + this.items[this.selected].imgl + ") no-repeat center center";
    
    /* Change the title & description */
    $('show_item_title').innerHTML = this.items[this.selected].title;
    $('show_item_description').innerHTML = this.items[this.selected].desc;
  }
}