var sideImages = null;

var contentItems = null;

var manufacturingImages = null;

var manufacturingLinks = null;

var imageTemplate = null;



window.addEvent('domready', function(){

  // Load your images here

  var data = [

     "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg"

  ];

  // Initialize the Slideshow instance

  var myShow = new Slideshow('show', data, { height: 291, hu: 'images/', width: 275 });



  // Add Events to moving images

  contentItems = $$('.content_list_container');

  imageTemplate = $('template_content_images');

  contentItems.each(function(el) {

    el.addEvent('click', function(e) {

      e = new Event(e).stop();

      positionImage(this);

    });

  });



  sideImages = $$('.template_content_image_box');

  manufacturingImages = $$('.template_content_manufacturing');



  manufacturingLinks = $$('#manufacturingLinks a');

  manufacturingLinks.each(function(el) {

    el.addEvent('click', function(e) {

      e = new Event(e).stop();

      hideSideImages();

      toShow = this.getAttribute('rel');

      $(toShow).setStyle('display', 'block');

    });

  });



});



window.addEvent('load', function() {

  if (contentItems && contentItems.length) {

    positionImage(contentItems[0]);

    setTimeout('positionImage(contentItems[0])', 1000);

  }

});



function positionImage(el) {

  if (imageTemplate) {

    imageTemplate.setStyle('paddingTop', '0px');

  }

  offset = 14;

  if (Browser.Engine.trident4) {

    offset = 7;

  }

  span =  el.getElement('span');

  hideSideImages();

  toShow = el.getAttribute('rel');

  // work out padding to display

  padding = el.getOffsets().y-231-291+104+offset;

  $(toShow).setStyle('paddingTop', padding+'px');

  $(toShow).setStyle('display', 'block');

  el.addClass('list_container_selected');

}



function hideSideImages() {

  if (contentItems) {

    contentItems.each(function(el) {

      el.removeClass('list_container_selected');

    });

  }

  if (sideImages) {

    sideImages.each(function(el) {

      el.setStyle('display', 'none');

    });

  }

  if (manufacturingImages) {

    manufacturingImages.each(function(el) {

      el.setStyle('display', 'none');

    });

  }

}