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

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

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

  this.get_element = function(id){
    return document.getElementById(id);
  }
  
  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)    
    
    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(id)
  { 
    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]
    //change image source
    main_image.id = "main"+footer_image.id
    main_image.src = this.regular_images[footer_image_id].src

    return true
  }
  
  this.write_image = function(id,image_pool){
    //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 border=\"0\" id=\""+id_name+"_"+id+"\" src=\""+image_src+"\" "
    if(_class) image += " class=\""+_class+"\""
    image += " />"
    return image
  }
  
  this.onclik = function(id){
    var image_container = this.get_element(id);
    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]
    this.open_windon(large_popup,'','width=400,height=500')
  }
  
  this.make_link = function()
  {
//     return "<a href=\"javascript:void(0);\" "+arguments[0]+">"+arguments[1]+"</a>"
       return "<a href=\"#MIMAGE\" "+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(id){
    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(dir,pos)
  {
    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(direction) {
    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(direction == 'forward')
    {
      if(pos[pos.length -1] != 1) pos = this.shift_array(1,pos,this.delta_slide)
    }
    else if(direction == 'back')
    {
      if(pos[0] != 1)  pos = this.shift_array(-1,pos,this.delta_slide) 
    }  
    
    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(fingers,medium,large)
{
  fingers = fingers.replace(/\'/g,"");
  medium = medium.replace(/\'/g,"");
  large = large.replace(/\'/g,"");
  IMAGE_ROLLER = new IMAGE_SLIDESHOW(fingers.split(','),medium.split(','),large.split(','))
  IMAGE_ROLLER.load_images()
}