var Tour = (function() {
  tourData = null;
  tourDataLength = 0;
  i = 0;

  tourNext = function() {
    $(".tour-active").removeClass("tour-active");
    $("#lightbox").remove();
    if ( $("#lightbox-bkg").length == 0 && IE7 == null ) {
      $("body").append('<div id="lightbox-bkg"></div>')
    }

    var tourStep = i + 1;

    if ( tourStep == tourDataLength  ) {
      var tourButtons = '<div class="buttons"><a class="btn btn-small" onclick="Tour.stopTour(); return false">All Done</a></div>';
    } else {
      var tourButtons = '<div class="buttons"><a class="btn btn-small mr10" onclick="Tour.tourNext(); return false">Next</a><a href="#" onclick="Tour.stopTour(); return false" class="font11">Stop Tour</a></div>';
    }

    var html = '<table id="lightbox" class="tourbox"><tr><td class="tl"></td><td class="tc"></td><td class="tr"></td></tr><tr><td class="ml"></td><td class="mm"><div class="content">';
    html += '<h5>'+ tourData[i].title + ' <span class="tour-steps">('+tourStep+' of '+tourDataLength+')</span></h5>';
    html += '<p>'+ tourData[i].text + '</p>';
    html += tourButtons;
    html += '<div class="tourbox-arrow '+tourData[i].arrow +'"></div>'
    html += '</div></td><td class="mr"></td></tr><tr><td class="bl"></td><td class="bc"></td><td class="br"></td></tr></table>'

    $(tourData[i].target).addClass("tour-active").append(html);
		// using 'hide' is a fix for opera, fadeIn now uses 'block' instead of 'table'
    $("#lightbox").hide().css({ 'top': tourData[i].top, 'left': tourData[i].left }).fadeIn();

    i++;
    return false;
  }

  stopTour = function (){
    $("#lightbox, #lightbox-bkg").remove();
    $(".tour-active").removeClass("tour-active");
    i = 0;
    tourStep = 0;
  }

  showTour = function() {
    i = 0;
    $.getJSON('/js/tour-data.json', function(data) {
      tourData = data;
      tourDataLength = data.length;
      tourNext();
    });
  }

  return {showTour: showTour, stopTour: stopTour, tourNext: tourNext};
}());