var currentPosition = 0;
var slideWidth = 644;

function init() { //Initializing page
  
  $(document).ready(function() {
    
    $('<img src="images/loader.gif" />').appendTo('#preloader');
    
    getData();
    
  });
}

function getData() { //Extract data from xml file
  
  data = "pictures.xml";
  pictures_a = new Array();
  picture_a = new Array();
  
  $.get(data, {}, function(xml) {
    
	  $('picture', xml).each(function(i) {
		  name = $(this).find("name").text();
		  width = $(this).find("width").text();
		  height = $(this).find("height").text();
		  customer = $(this).find("customer").text();
		  project = $(this).find("project").text();
		  media = $(this).find("media").text();
		  
		  picture_a = {"name": name, "width": width, "height": height, "customer": customer, "project": project, "media": media};
		  pictures_a.push(picture_a);
	  });
	  
	  createAndLoadSlides(pictures_a);
	  
  });
  
}

function createAndLoadSlides(pictures_a) { //Create slides and Load data
  
  for (i = 0; i < pictures_a.length; i++) {
    var code = "";
    code += '<div class="slide" id="' + pictures_a[i]["name"] + '">';
    code += '<center><div class="img" href=""></div></center>';
    code += '<p class="description">';
    code += '<strong>' + pictures_a[i]["customer"] + '</strong>';
    if (pictures_a[i]["project"])
      code += ' - ' + pictures_a[i]["project"] + '<br />';
    code += pictures_a[i]["media"];
    code += '</p>';
    
    document.getElementById("slideInner").innerHTML += code;
    
    img = $(new Image())
      .attr('src', "images/" + pictures_a[i]["name"] + ".jpg")
      .attr('width', pictures_a[i]["width"]).attr('height', pictures_a[i]["height"])
      .appendTo("#" + pictures_a[i]["name"] + " div.img");
      
    $("#" + pictures_a[i]["name"] + " a").css('width', pictures_a[i]["width"]);
    
  }
  
  img.load(function() {
      $('#preloader').hide();
      $('#footer').show();
      $("#slideshow").fadeIn(1500);
  });
  
  slideManager();
  
}

function slideManager() { //Manage slideshow

  var slides = $('.slide');
  var numberOfSlides = slides.length;

  $('#slidesContainer').css('overflow', 'hidden');

  $(".slide").css({'float' : 'left', 'width' : slideWidth});
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  $('#slideshow').prepend('<div class="control" id="leftControl">Move left</div>');
  $('#slideshow').append('<div class="control" id="rightControl">Move right</div><div class="blaster">&nbsp;</div>');
  
  var toto = setInterval(function(){autoSlide(numberOfSlides, slideWidth)}, 3000);
  
  $('.control')
    .bind('click', function() {
      
      clearInterval(toto);
      
      if ($(this).attr('id') == 'rightControl') {
        if (currentPosition + 1 == numberOfSlides)
          currentPosition = 0;
        else
          currentPosition++;
      }
      else {
        if (currentPosition == 0)
          currentPosition = numberOfSlides - 1;
        else
          currentPosition--;
      }
      
      $('#slideInner').animate({
        marginLeft: slideWidth * (-currentPosition)
      });
    });
  
}

function autoSlide(numberOfSlides, slideWidth) {
  if (currentPosition + 1 == numberOfSlides)
    currentPosition = 0;
  else
    currentPosition++;

  $('#slideInner').animate({
    marginLeft: slideWidth * -currentPosition
  });
}