(function($) {

//NOTE: we assume that all are in the same container
var activeEventScroller = null;
var timerEventScroller = null;

function doFancyEventScroller(obj) {
  var events = $('.event');
  var links = $('.event_chooser');
  
  function doFancyIn() {
    var pos = jQuery.inArray(obj, events);
    $(links[pos]).css('background-color', $(links[pos]).css('borderColor') === undefined ? $(links[pos]).css('borderBottomColor') : $(links[pos]).css('borderColor'));
    $(links[pos]).css('color', '#e5d6bb');
    $(obj).find('img').fadeOut(1);
    $(obj).find('.content').fadeOut(1); //.css('opacity', 0); //.css('left', 600)
    $(obj).find('h3').animate({left: 600}, 1);
    obj.style.display = 'block';
    $(obj).find('img').fadeIn(1500);
    $(obj).find('.content').fadeIn(1500, function() { $(obj).find('.shadow').css({top: 0, left: 0, display: 'block'}).animate({top: 4, left: 4}, 500); }); //.animate({opacity: 1}, 1000); //left: 198,
    $(obj).find('.shadow').css('display', 'none');
    $(obj).find('h3').animate({left: 234}, 1500);
  }
  
  if( activeEventScroller !== null ) {
    var oldPos = jQuery.inArray(activeEventScroller, events);
    
    $(activeEventScroller).find('img').fadeOut(1500, function(tmp) { return function() { doFancyIn(); tmp.style.display = 'none'; }}(activeEventScroller));
    $(activeEventScroller).find('.content').fadeOut(1500); //animate({opacity: 0}, 1000);//left: 600,
    $(activeEventScroller).find('.shadow').animate({top: 0, left: 0}, 500, function() { this.style.display = 'none'; } );
    $(activeEventScroller).find('h3').animate({left: 600}, 1500)

    $(links[oldPos]).css('background-color', '#e5d6bb');
	$(links[oldPos]).css('color', $(links[oldPos]).css('borderColor') === undefined ? $(links[oldPos]).css('borderBottomColor') : $(links[oldPos]).css('borderColor'));
  } else {
    doFancyIn();
  }
  
  activeEventScroller =  obj;
}

function makeEventScroller() {
  //get all events
  var events = $('.event');

  //hide the events
  events.each(function(i) { this.style.display = 'none'; });
  events[0].style.display = 'block';
  activeEventScroller = events[0];
  
  //get the containing node
  var container = events[0].parentNode;
  
  //build a selection mechanism
  var chooser = document.createElement('div');
  chooser.className = 'chooser';
  for(var i = 0; i < events.length; i++) {
    var link = document.createElement('a');
    link.innerHTML = i + 1;
    link.className = "event_chooser";
    link.onclick = function(obj) { return function() {
        if(timerEventScroller !== null) {
          window.clearInterval(timerEventScroller);
          timerEventScroller = null;
        }
        doFancyEventScroller(obj);
      };
    }(events[i]);
    chooser.appendChild(link);
  }
  
  //add the chooser to the container
  container.appendChild(chooser);
  var hr = document.createElement('hr');
  hr.className = 'event_divider';
  container.appendChild(hr);
  
}

function startEventScrollerTimer() {
  timerEventScroller = window.setInterval(function() {
      //get all events
      var events = $('.event');
      var oldPos = jQuery.inArray(activeEventScroller, events);
      var pos = (oldPos + 1) % events.length;
      
      doFancyEventScroller(events[pos]);
      
      activeEventScroller = events[pos];
    }, 10000);
}

this.makeEventScroller = makeEventScroller;
this.startEventScrollerTimer = startEventScrollerTimer;

})(jQuery);