window.addEvent('domready',function() {
  // Set min-height in browser < IE7
  if(navigator.userAgent.toLowerCase().indexOf('msie') > 0 && $('content').getStyle('height').toInt() < 250) {
    $('content').setStyle('height','250px')
  }
  
  // Make png's transparent
  $$('img[src$=.png]').each(function(png) {
    png.setStyle('behavior','url(/_include/pngFix.htc)');
  });
  // External links open in new window
  $$('a[rel=external]').each(function(extLink) {
    extLink.setProperty('target','_blank');
  });
  
  /* ---------------------------------------- */
  var headImages = $$('#header-img img');
  if(headImages.length > 0) {
    var mySlideShow = new mooSimpleSlide(headImages,{period:5000});
    mySlideShow.displayImage();
  }
  
  /* ---------------------------------------- */
  // Mouseover event on subnavigation
  //if($('subnavigation') && $('photocontainer')) {
  if($('photocontainer')) {
    //var myShow = new imgShow($$('#subnavigation li a'));
    var myShow = new imgShow($$('#content ul li a'));
    
    //var myImages = $$('#subnavigation li a').getNext().getText();
    var myImages = $$('#content ul li a').getNext().getText();
    var myNewImages = [];
    myImages.each(function(item,index) {
      if(myImages != '') myNewImages[index] = '/_userdata/'+item;
    });
    
    myShow.preloadImages(myNewImages,$('photocontainer'));
  }
  
  /* ---------------------------------------- */
  // Thumbnails
  if($$('.thumbnails') && $('photocontainer')) {
    var myShow = new imgShow($$('.thumbnails img'));
    
    var myImages = $$('.thumbnails img').getProperty('src');
    var myNewImages = [];
    myImages.each(function(item,index) {
      myNewImages[index] = item.replace(/_thumb\//,'');
    });
    
    myShow.preloadImages(myNewImages,$('photocontainer'));
  }
});

/* ---------------------------------------- */
/*
mooSimpleSlide - Simple SlideShow Class
version: 0.26
copyright 2007 11 07 - Huug Helmink, Ace Group bv


mootools v.1.11 classes
Core: Core
Class: Class, Class.Extras
Native: Array, String, Function, Number, Element
Fx: Fx.Base


Usage:
  var mySlideShow = new simpleSlide([images::array]);
    or
  var mySlideShow = new simpleSlide([images::array],{period:[interval between images in ms::integer]});
  mySlideShow.displayImage();
*/
var mooSimpleSlide = new Class({
  options: {
    period: 0
  },
  initialize: function(imageArray,options) {
    // Check if imageArray is an array
    if($type(imageArray) != 'array') return;
    
    this.images = imageArray;
    this.setOptions(options);
    this.active = 0;
    this.max = this.images.length;
    
    // Set styles so images will fade in and out nicely
    this.images.setStyles({
      'display': 'none',
      'position': 'absolute',
      'opacity': 0
    });
    this.images.getParent().setStyle('position','relative');
    
    // If period options is set > 0, periodical display an image
    if(this.options.period > 0) this.displayImage.periodical(this.options.period,this);
  },

  displayImage: function() {

	if (this.images.length > 1)	{

		var FxTransitionTime = this.options.period/5;
		
		// Hide image
		this.images[this.active].effect('opacity',{duration:FxTransitionTime,onComplete:function(item) {
		  item.setStyle('display','none');
		}}).start(1,0);

		// Set next image or the first
		if(this.active < this.max-1) this.active++;
		else this.active = 0;
		
		// Show image
		this.images[this.active].effect('opacity',{duration:FxTransitionTime,onStart:function(item) {
		  item.setStyle('display','inline');
		}}).start(0,1);
	} else {
		this.images[0].setStyle('display', 'inline').setStyle('opacity', 1);
	}
  }
});
mooSimpleSlide.implement(new Options);

/* ---------------------------------------- */
// Simple image show class
var imgShow = new Class({
  initialize: function(elementArray) {
    this.elements = elementArray; // Where are the elements that get a mouseover event
  },
  
  // Preload images and put them in a container on event
  preloadImages: function(imagesToLoad,destContainer) {
    var images = new Asset.images(imagesToLoad);
    this.elements.each(function(item,index) {
      item.addEvents({
        'mouseover': function() {
          if(destContainer.getFirst()) destContainer.getFirst().setStyle('display','none');
          if(images[index].getProperty('src').length > 11) images[index].injectInside(destContainer);
        },
        'mouseout': function() {
          if(images[index].getProperty('src').length > 11) images[index].remove();
          if(destContainer.getFirst()) destContainer.getFirst().setStyle('display','block');
        }
      });
    });
  }
});