var ss;


Event.observe(window, "load", function () {
  ss = new SlideShow("slideshow1", {
    initialState: "play",
    interval: 12000,
    onChange: onSSChange,
    positionId: "ss_position",
    prevButton: "prev_button",
    nextButton: "next_button",
    playPause: "playpause",
    onplay: function() { $("playpause").update("pause") },
    onpause: function() { $("playpause").update("resume") }
  });
});

function updateInfo(index, image, client, agency, photographer, before) {
    workdivs[index].setStyle({backgroundImage: "url(" + path + image + ")"});
    if (client == "" && typeof client == "string") {
      $("client_label").hide();
    }
    else {
      $("client_label").show();         
    }
    if (agency == "" && typeof agency == "string") {

      $("agency_label").hide();
    }
    else {
      $("agency_label").show();         
    }
    if (photographer == "" && typeof photographer == "string") {
      $("photographer_label").hide();
    }
    else {
      $("photographer_label").show();         
    }
    $("client").update(client);
    $("agency").update(agency);
    $("photographer").update(photographer);
    
    if (before == "" || typeof before == "undefined") {
      $("beforeafter").update(""); 
    }
    else {
      $("beforeafter").update("<a id='beforelink' href='javascript:;' onclick=\"showBefore('" + index + "', '" + before + "')\">see before</a><a id='afterlink' style='display:none' href='javascript:;' onclick=\"showAfter('" + index + "', '" + image + "')\">see after</a>");
    }
 
}  


function beforeOn() {
  $("beforelink").addClassName("before-over");
}
function beforeOff() {
  $("beforelink").removeClassName("before-over");
}

function switchImage(index, image) {
    workdivs[index].setStyle({backgroundImage: "url(" + path + image + ")"});
}

function showBefore(index, image) {
    ss.pause();
    switchImage(index, image);
    $("beforelink").hide();
    $("afterlink").show();
}
function showAfter(index, image) {
    switchImage(index, image);
    $("beforelink").show();
    $("afterlink").hide();
}


var current = 1;  
function onSSChange(slideshow) {
  if (typeof(slideshow.current_slide) != "undefined") {
    updateDots(slideshow.current_slide);
  }
  show_thumb(slideshow.current_slide);

}

function updateDots(index) {
  $$("#dots div.current").invoke("removeClassName", "current");
  dots[index].addClassName("current");
  updateInfo(index, work[index].image, work[index].client, work[index].agency, work[index].photographer, work[index].before);
  show_thumb(index);

}

function go(id) {
  if (id != ss.current_slide) {
    ss.go_to(id, true);
  }
}

var clearThumb;

function show_thumb(index) {
  clearTimeout(clearThumb);
  if (work[index].thumb != "" && typeof work[index].thumb == "string" ) {
    var image = path + work[index].thumb;
  }
  else {
    var image = thumb_path + work[index].image;
  }
  $("preview-thumb").setStyle({backgroundImage:"url(" + image + ")"});
}

function hide_thumb() {
  clearThumb = setTimeout(function() {
    show_thumb(ss.current_slide);
  }, 1000);
}

var images = new Array();
var index = 0;
var workdivs = $$(".work_img");
var dots = $$("#dots div");

Event.observe(window, "load", function() {

  for (var index=0; index < dots.length; index++) {
    dots[index].observe("mouseover", show_thumb.curry(index));
    dots[index].observe("mouseout", hide_thumb);  
  }
  var index=0;
  work.each(function(w) {
    images[index] = new Image();
    images[index].onload = imageLoaded.bind(index);
      
    index++;
  });
  images[0].src = path + work[0].image;
  images[1].src = path + work[1].image;
  images[2].src = path + work[2].image;
  images[3].src = path + work[3].image;

});    
function imageLoaded() {
  var i = this;
  workdivs[i].setStyle({backgroundImage: "url(" + path  + work[i].image + ")"});
  dots[i].removeClassName("loading");
  workdivs[i].removeClassName("loading-image");
  if (i + 4 < images.length) {
    images[i+4].src = path + work[i+4].image;
  }
}