var current_id = -1;
var opacity = 0;
var fade_node = null;
var fade_out_node = null;
var only_one_item = true;

var const_fade_step_time = 100;
var const_fade_step_size = 4;
var const_show_time = 3000;


/**
* Begins the slideshow
**/
function begin_slideshow () {
  // find the node. if its not found, come back later.
  var node = document.getElementById ('image_scroll');
  if (node == null) return;
  fade_node = node;
  fade_out_node = document.getElementById ('image_hover');
  
  //window.setTimeout (rotate_home_image, 1000);
  rotate_home_image ();
}


/**
* Fades in an image, waits a while then fades it out
**/
function rotate_home_image () {
  
  // choose the next event id
  current_id++;
  if (current_id >= images.length) {
    current_id = 0;
  }
  draw_node (fade_node, current_id);
  
  // if theres only one item we behave slightly differently
  if (images.length == 1) {
    only_one_item = true;
  } else {
    only_one_item = false;
  }
  
  window.setTimeout (increase_opacity, const_fade_step_time);
}


function draw_node (node, id) {
  var image_nodes = node.getElementsByTagName ('img');
  var image_node;
  if (image_nodes.length > 0) {
    image_node = image_nodes.item (0);
    image_node.src = images[id];
  }
}


/**
* Increases the opacity of the text element
**/
function increase_opacity () {
  opacity += const_fade_step_size;
  set_element_opacity (fade_node, opacity);
  set_element_opacity (fade_out_node, 100 - opacity);
  
  // if we have maxed opacity, wait for a while, otherwise keep fading
  if (opacity >= 100) {
    opacity = 100;
    current_id++;
    if (current_id >= images.length) {
      current_id = 0;
    }
    draw_node (fade_out_node, current_id);
    
    window.setTimeout (decrease_opacity, const_show_time);
  } else {
    window.setTimeout (increase_opacity, const_fade_step_time);
  }
}


/**
* Decreases the opacity of the text element
**/
function decrease_opacity () {
  // if we are only one item, don't start the fade straight away
  if ((opacity == 100) && only_one_item) {
    return;
  }
  
  // otherwise fade
  opacity -= const_fade_step_size;
  set_element_opacity (fade_node, opacity);
  set_element_opacity (fade_out_node, 100 - opacity);
  
  // if we have no opacity, wait for a while, otherwise keep fading
  if (opacity <= 0) {
    opacity = 0;
    current_id++;
    if (current_id >= images.length) {
      current_id = 0;
    }
    draw_node (fade_node, current_id);
    window.setTimeout (increase_opacity, const_show_time);
  } else {
    window.setTimeout (decrease_opacity, const_fade_step_time);
  }
}


/**
* Sets the elements opacity to the specified value. Value should be a percentage with 100% is fully shown
**/
function set_element_opacity (elem, value) {
  if (elem == null) return;
  
  // IE
  if (is_msie) {
    elem.style.filter = 'alpha(opacity=' + value + ')';
    
  // Mozilla, Opera, Safari, etc.
  } else {
    value = value / 100;
    elem.style.opacity = value;
    elem.style.MozOpacity = value;
    elem.style.KhtmlOpacity = value;
  }
}


/**
* Functions to make MSIE sane
**/
var is_msie = false;
if (navigator.userAgent.match ('MSIE') !== null) is_msie = true;

function create_element (tag_name, attribs) {
  var element = null;
  
  tag_name = String (tag_name);
  tag_name = tag_name.toLowerCase ();
  
  // IE is broken with many elements but its non-W3C methods seem to work
  if (is_msie) {
    var tag_text;
    tag_text = '<' + tag_name;
    for (var key in attribs) {
      tag_text += ' ' + String (key) + '="' + String (attribs[key]) + '"';
    }
    tag_text += '>';
    element = document.createElement (tag_text);
    
  } else {
    element = document.createElement (tag_name);
    for (var key in attribs) {
      element.setAttribute (String (key), String (attribs[key]));
    }
  }
  
  return element;
}