// JavaScript Document
 Layout = {
    // setup
    ih: 0,
    iw: 0,
    iar: 1,
    war: 1,
    img: '',
    GetWindowSize: function(w) {
            w = w ? w : window;
            var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
            var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
            return [width, height];
    },
    // initialize
    init: function(e) {
      // image height, width and aspect ratio
      Layout.img = $('coal_slideshow_0');
      Layout.holder = $('coal_homepage_slideshow');
      Layout.ih = Layout.img.getHeight();
      Layout.iw = Layout.img.getWidth();
      Layout.iar = Layout.iw / Layout.ih;
      Layout.resize(e);
      Layout.number_of_images = images_json.length;
    },
    resize: function(e) {
      // window width, height and aspect ratio
      ws = Layout.GetWindowSize(window);
      window_width = ws[0];
      window_height = ws[1];
      window_ratio = window_width / window_height;
      
      image_width = Layout.iw;
      image_height = Layout.ih;
      image_ratio = Layout.iar;
      
      new_image_width = window_width;
      new_image_height = ( new_image_width / image_width ) * image_height;
      width_diff = 0;
      height_diff = -( new_image_height - window_height ) / 2;
      
      if( new_image_height < window_height ) {
        new_image_height = window_height;
        new_image_width = ( new_image_height / image_height ) * image_width;
        height_diff = 0;
        width_diff = -( new_image_width - window_width ) / 2;
      }
      
      niw = Math.ceil(new_image_width);
      nih = Math.ceil(new_image_height);
      
      slideshow_images = Layout.holder.select('img');
      slideshow_images.each( function(simage, index) {
        simage.setStyle( { width: niw+"px", height: nih+"px", top: height_diff+'px', left: width_diff+'px' } );
      });
      
    }
  }
  
  images_json = [];
  Event.observe(window, 'resize', function() { Layout.resize(); } );
  Event.observe(window, 'load', function() {
    // images, container class_name, transition_time, interval
    slideshow = new EKSlideShow( images_json, 'coal_slideshow', 1, 10 );
    pe = new PeriodicalExecuter(function(pe) {
      Layout.init();
      pe.stop();
      pee = new PeriodicalExecuter( function(pee) {
        Layout.resize();
      }, 3);
    }, 0.02);
  });