/*
  Author: Moises Beltran
  
  Usage: See any example.
*/
//holds instance of IMAGE_ROLLER
var IMAGE_ROLLER = false 

function IMAGE_SLIDESHOW()
{
  this.pre_load_images = function()
  {
    all_images = new Array()
    for(var i =0;i<arguments[0].length;++i)
    {
      img = new Image();
      img.src = arguments[0][i]
      all_images.push(img)
    }
    return all_images
  }
  //preload images
  this.thumbnail_images = this.pre_load_images(arguments[0])  
  this.regular_images = this.pre_load_images(arguments[1])
  this.regular_images_popup = arguments[2]

  this.popup = true
  if(this.regular_images_popup.length < 1) this.popup = false
  this.var_name = "IMAGE_ROLLER"
  //this.arrows = Array('/images/icons/arrow_left.gif','/images/icons/arrow_right.gif')
  this.arrows = Array('http://www.cpoelectrolux.com/images/icons/arrow_left.gif','http://www.cpoelectrolux.com/images/icons/arrow_right.gif')
  
  this.image_scroller = "image_scroller"
  this.image_footer_class = "paginated"
  this.image_footer_show = 4

  this.get_element = function(){
    return document.getElementById(arguments[0]);
  }
  
  this.get_element_by_tag = function(){
    if(arguments[0] && arguments[1])
      if(elem = arguments[0].getElementsByTagName(arguments[1])) 
        return elem;;
    return false;
  }

  this.open_windon = function() {
    window.open(arguments[0],arguments[1],arguments[2]);
  }
  //is called after class is instantiated
  this.load_images = function()
  {
    var id = 0
    var image_container = this.get_element(this.image_scroller+'_container')
    var main_image = this.write_image(id,this.regular_images,false,"mainimage")
    image_container.innerHTML = this.link_main_image(main_image)

    this.centerImage("mainimage_"+id,this.regular_images[id].src)
    
    var image_footer = this.get_element(this.image_scroller+'_footer')
    image_footer.style.display = 'none'
    image_footer.innerHTML = this.write_image_footer(id)
    
    this.update_footer()
  }
  
  this.change_image = function()
  {
    var id = arguments[0]
   
    var image_container = this.get_element(this.image_scroller+'_container');
    var image_footer = this.get_element(this.image_scroller+'_footer');  
    main_image = this.get_element_by_tag(image_container,'img')[0];
    
    footer_images = this.get_element_by_tag(image_footer,'img')
    footer_image = new Array()
    for(var i=0;i < footer_images.length;++i)
    { 
      if(footer_images[i].id.split("_")[0] == "image") 
        footer_image.push(footer_images[i])
    }
    footer_image = footer_image[id]    
    footer_image_id = footer_image.id.split("_")[1]

    main_image.id = "main"+footer_image.id
    this.centerImage(main_image.id,this.regular_images[footer_image_id].src )
    //change image source
    main_image.src = this.regular_images[footer_image_id].src    
  }
  this.centerImage = function(id,src)
  {
    img = new Image()
    img.src = src
    
    var image = this.get_element(id);
   //change image position
    new_offset = (290 - img.height)/2

    if(new_offset < 100) image.style.top = new_offset
  }
  
  this.write_image = function(){
    var id = arguments[0]
    var image_pool = arguments[1]
    //are we using url or image.src?
    if(image_pool[id].src) var image_src = image_pool[id].src
    else
      var image_src = image_pool[id]
      
    if(arguments[2] != false) var _class = arguments[2]
    //override id name?
    if(arguments[3]) var id_name = arguments[3]
    else
      var id_name = "image"
      
    var image = "<img id=\""+id_name+"_"+id+"\" src=\""+image_src+"\" "
    if(_class) image += " class=\""+_class+"\""
    image += " onload=\"IMAGE_ROLLER.centerImage(this.id,this.src )\" />"
    return image
  }
  
  this.onclik = function(){
    var image_container = this.get_element(arguments[0]);
    main_image = this.get_element_by_tag(image_container,'img')[0];
    main_image_id = main_image.id.split("_")[1]
    var large_popup = this.regular_images_popup[main_image_id]
    return this.open_windon(large_popup,'','width=400,height=500')
  }
  
  this.make_link = function()
  {
    return "<a href=\"#SHOWIMAGE\" "+arguments[0]+">"+arguments[1]+"</a>"
  }
  
  this.link_main_image = function(){
    if(this.popup == true)
    {
      var nm = this.image_scroller+"_container"
      return this.make_link("onclick=\""+this.var_name+".onclik('"+nm+"')\"",arguments[0])
    }
    else
      return arguments[0]
  }
  
  this.link_image = function(){
    return this.make_link("onclick=\""+this.var_name+".change_image("+arguments[0]+")\"",arguments[1])
  }
  
  this.link_arrows = function(){
    return this.make_link("onclick=\""+this.var_name+".update_footer('"+arguments[0]+"')\"",arguments[1]) 
  }
  
  this.write_image_footer = function(){
    var id = arguments[0]
    var image_tags = ""
    image_tags += this.link_arrows('back',this.write_image(0,this.arrows,false,"arrow"))
    for(var i=0;i<this.thumbnail_images.length;++i)
    {
//       if(i == id) continue;
      image_tag = this.write_image(i,this.thumbnail_images,this.image_footer_class)
      image_tags +=  this.link_image(i,image_tag)
    }
    image_tags += this.link_arrows('forward',this.write_image(1,this.arrows,false,"arrow"))
    return image_tags
  }
  
  
  this.shift_array = function()
  {
    var dir = arguments[0]
    var pos = arguments[1]
    var start = 1;
    var stop = pos.length
    var pos_new = new Array()
    if(dir > 0)
    {
      start = 0;
      stop = pos.length-1
      pos_new.push(pos[pos.length-1])
    } 
    for(i=start;i<stop;i++) pos_new.push(pos[i])
    if(dir < 0) pos_new.push(pos[0])
    return pos_new
  }
  
  this.update_footer = function() {
    var items = new Array()
    var image_footer = this.get_element(this.image_scroller+'_footer')
    var image_footer_images = this.get_element_by_tag(image_footer,'img');
    
    for(var i=0;i<image_footer_images.length;++i)
    {
      if(image_footer_images[i].className != this.image_footer_class)
      {
        //disable arrows
        if(this.thumbnail_images.length <= this.image_footer_show)
        {
          image_footer_images[i].style.display='none'
        }
        continue
      }
      items.push(image_footer_images[i])
    }
    //determine positions
    var pos = new Array()
    for(i=0;i<items.length;i++){
      if(items[i].style.display=='none') pos.push(0)
      else
        pos.push(1)
    }
    var sum_tot = 0
    for(i=0;i<pos.length;i++) sum_tot += pos[i]
    
    if(arguments[0] == 'forward')
    {
      if(pos[pos.length -1] != 1) pos = this.shift_array(1,pos)
    }
    else if(arguments[0] == 'back')
    {
      if(pos[0] != 1)  pos = this.shift_array(-1,pos) 
    }  
    
    if(sum_tot == pos.length) var cold_start = true
    for(i=0;i<items.length;i++){
      if(cold_start)
      {
        if(i >= this.image_footer_show) items[i].style.display='none';
      }
      else
      {
        if(pos[i] == 0) items[i].style.display='none';
        else
          items[i].style.display='';
      }
//       if(i > 0 && pos[i] != 0 && pos[i-1] != 0 ) items[i].style.borderLeft='1px dotted black';
//       else
//         items[i].style.borderLeft='';      
    }
    image_footer.style.display = 'block'
  }
  
//   this.load_images(arguments[0])
}

function load_image_slideshow()
{
  //arguments[0]  = fingernail images
  //arguments[1]  = regular images
  //arguments[2] = Large popup images
  var fingers = arguments[0];
  var medium = arguments[1];
  var large = arguments[2];
  IMAGE_ROLLER = new IMAGE_SLIDESHOW(fingers,medium,large)
//   IMAGE_ROLLER = new IMAGE_SLIDESHOW(arguments[0],arguments[1],arguments[2])
  IMAGE_ROLLER.load_images()
}