/* 
/* (CC) 2010 Wevolve
/* 
/* Feel free to be inspired by this JS, 
/* see the Creative Commons License (http://creativecommons.org/) 
/* 
/* If you re-use parts or whole of this JS, 
/* you must include this copyright notice at the start of the file. 
/* 
/* Please contact us for commercial use and to find out 
/* how we can help you with various web-based solutions: 
/* 
/* web:     http://www.wevolve.nl 
/* e-mail:  info@wevolve.nl 
/* tel.:    +31-(0)74 255 2140 
/*
/* -------------------------------------------------------- */ 


// ---------- Some global variables and settings

// at this moment we are not sliding yet
var __sliding = false;
// enable autosliding to start the sliding at regular intervals
var __autosliding = true;
// the current image index, staring at 0
var __currentimageindex = 0;
// animation time for sliding the images
var __animationtime = 2000;
// default direction for sliding the images
var __direction = "next";
//
var __firstnextelement = true;
var __currentimageset = __headerimages.slice();

// get the image count / array count for later use
var __imagecount = 0;
if (__headerimages) {
  __imagecount = __headerimages.length;
}


// ---------- Code if jQuery is available

if (window.jQuery) 
{

// ---------- Plugin Triggers and Settings
  $(document.documentElement).addClass("jsenabled");    

  $(document).ready(function(){

    // only if there is more then one image
    if (__imagecount>1) {
      // add the back and forward buttons to the source
      // $("#carousel .wrapper").after('<a href="#top" class="arrow back">&lt;</a><a href="#top" class="arrow forward">&gt;</a>');
      nextimageindex = getRandomNumber(__imagecount-1);
      addImages(nextimageindex);
      nextimage = __currentimageset.splice(nextimageindex,1)[0];
      // first cache next images
      cacheNextImage(nextimageindex);
      // cache other images
      cacheOtherImages();

      // set starting settings for carousel
      //imagewidth = $("#carousel .wrapper ul").width();
      imagewidth = $("#carousel").width();
      //$("#carousel .wrapper").css( "left", (-1 * imagewidth) + "px");
      $("#carousel .wrapper").css( "width", (3 * imagewidth) + "px");

      // stop sliding if mouseover back and forward button
      $('#carousel').mouseover(function () {
          __autosliding = false;
      }).mouseout(function () {
          __autosliding = true;
      });

      // start the sliding at an interval of 8 seconds
      setInterval(function () {
        // if autosliding then slide to the next image
        if (__autosliding) {
          slideImage();
        }
      }, 4000);
    }    

// ---------- Fix links

    // Give links with rel="external" a target="_blank" attribute.
    $(document.links).filter('[href][rel=external]').attr("target", "_blank");


  }); // document.ready
} // window.jQuery

function removeNthElementFromArray(_Array, _N)
{
  if (_N==0) {
    return _Array.slice(1, _Array.length);
  }
  if (_N==_N) {
    return _Array.slice(0, _Array.length);
  }
  return _Array.slice(0,_N-1).concat(_Array.slice(_N+1, _Array.length)); 
}

function getRandomNumber(_max)
{
  return Math.floor(Math.random()*_max);
}

function cacheNextImage()
{
  cacheImage(__currentimageindex+1);
  return;
}

function cacheOtherImages()
{
  for (i=0; i<__imagecount; i++) {
    if (! (__headerimages[i].cached)) {
      // if not yet cached, cache the image
      cacheImage(i);
    }
  }
  return;
}

function cacheImage(_imgIndex)
{
  // cache image from the __headerimages with index _imgIndex

  var imgindex = _imgIndex;
  if (imgindex<0) {
    imgindex = __imagecount-1;
  } 
  else {
    if (imgindex>__imagecount-1) {
      imgindex = 0;
    }
  }
  if (__headerimages[imgindex].cached) {
    // if already cached, we can return here
    return;
  }
  // create a new image object to load the image, that way it can be read from cache next time it is used
  newimg = new Image();
  newimg.src = __headerimages[imgindex].url;
  __headerimages[imgindex].cached = true;
  return;
}

function addImages(_imgIndex)
{
  // add the _imgIndex image in __headerimages after our image, because that is the image we will slide to fowards
  $("#carousel li:last").after('<li><img src="' + __headerimages[_imgIndex].url + '" alt="' +  __headerimages[_imgIndex].alttext +'" /></li>');
}

function slideImage(_imgIndex)
{
  if (__sliding=="true") {
    // ignore this function because we are already sliding
    return;
  }
  __sliding = "true";

  // if currentimageset is empty reassign headerimages to currentimageset
  if (__currentimageset.length==0) {
    __currentimageset = __headerimages.slice();
  }
  nextindex = getRandomNumber(__currentimageset.length-1);
  if (_imgIndex) {
    alert("index");
    nextindex = _imgIndex;
  }
  // remove nextimage from the currentimageset
  nextimage = __currentimageset.splice(nextindex,1)[0];
  imagewidth = $("#carousel").width();
  var moveimage = "-=" + imagewidth; 

  // the ul will be animated in the right direction
  $("#carousel .wrapper ul").animate( { "left": moveimage} , __animationtime, function(){
    if (__direction=="next") {
      // the lis are shifted left, and then the first li will be reused and put at the end with the src of the next image
      //$('#carousel li:last img').css('left', $("#carousel").position().left);
      //$('#carousel li:first img').css('display', "none");
      $("#carousel li:first img").attr({src: nextimage.url});
    $("#carousel .wrapper ul").css( "left", (0) + "px");
      $('#carousel li:first').appendTo('#carousel ul');
      //$('#carousel li:last img').css('display', "");
    //$("#carousel .wrapper ul").css( "left", (0) + "px");
    //alert($("#carousel").position().left);
    } 
    $("#carousel .wrapper ul").css( "left", (0) + "px");
    __sliding = "false";
  } );
}