// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
var EKSlideShow = Class.create();
Object.extend(Object.extend(EKSlideShow.prototype, Abstract.prototype), {
  
  image_urls: [],
  image_elements: [],
  load_status: [],
  preloaded: false,
  interval_time: 5,
  transition_time: 1,
  container: '',
  target_image: '',
  current_index: '',
  preload_index: 1,
  container_class_name: '',
  timer: '',
  animation_timer: '',
  previous_index: -1,
  loadcheck_timer: '',
  check_time: 250,
  
  initialize: function( images_json, class_name, transition, interval ) {
    
    // grab variables
    this.image_urls = images_json;
    this.container_class_name = class_name;
    this.transition_time = transition;
    this.interval_time = interval * 1000;
    this.image_elements = [];
    this.current_index = 0;
    this.preload_index = 0;
    this.preloaded = false;
    this.previous_index = -1;
    this.loadcheck_timer = '';
    this.check_time = 250;
    
    // setup
    this.container = $$( '.' + this.container_class_name )[0];
    this.target_image = this.container.firstDescendant();
    this.image_elements.push(this.target_image);
    
    // create image elements
    var images = [];
    this.image_urls.each(function(image_url,index) {
      var img = new Element( 'img', { 'id': 'coal_slideshow' + index, 'alt': 'Coal Headwear', 'style':'display:none;' });
      images.push(img);
    });
    this.image_elements = images;
    
    // keep track of load status... start with all
    this.load_status[0] = true;
    for( i = 1; i <= this.image_elements; i++ ) {
      this.load_status.push(false);
    }
    
    // start loading
    this.preload_next();
    
    // set timer for transition
    // find out how to do this within our context... pass object instance variable name in as argument?
    this.timer = setInterval( 'slideshow.next_slide();', this.interval_time );
    
  },
  change: function(new_url) {
    // animate to a new image
    
  },
  next_slide: function() {
    // animate to the next image in the array
    this.previous_index = this.current_index;
    this.current_index++;
    if(this.current_index >= this.image_elements.length ) {
      this.current_index = 0;
    }
    this.loadcheck_timer = setInterval( 'slideshow.animate_transition();', this.check_time );
  },
  animate_transition: function() {
    
    clearInterval(this.loadcheck_timer);
    
    if( this.load_status[this.current_index] == true ) {
      
      if(this.current_index == 0) {
        this.image_elements[this.previous_index].fade({ duration: this.transition_time });
      } else {
        this.image_elements[this.current_index].appear({ duration: this.transition_time });
      }
      this.animation_timer = setInterval( 'slideshow.appear_complete();', ( this.transition_time + 0.5 ) * 1000 );
    } else {
      this.loadcheck_timer = setInterval( 'slideshow.animate_transition();', this.check_time );
    }
  },
  appear_complete: function() {
    // hide the previous image if this is beyond the first image...
    if(this.previous_index > 0) {
      this.image_elements[this.previous_index].hide();
    }
    clearInterval(this.animation_timer);
  },
  preload: function(index) {
    var img = this.image_elements[index];
    Event.observe( img, 'load', function() {
      slideshow.preload_complete();
    });
    img.src = this.image_urls[index];
  },
  preload_complete: function() {
    // handler when loading is complete
    var img = this.image_elements[ this.preload_index ];
    Element.insert( this.container, { bottom: img });
    this.load_status[this.preload_index] = true;
    this.preload_next();
  },
  preload_next: function() {
    // see if the next image can be preloaded... if it can, do so.
    this.preload_index++;
    if( this.preload_index >= this.image_urls.length ) {
      this.preloaded = true;
    } else {
      this.preload( this.preload_index );
    }
  }
  
});