function StoryBoard(widget_exp, item_id_prefix, cover_width, cover_height) {
  this.widget_exp = widget_exp;
  this.item_id_prefix = item_id_prefix;
  this.cover_width = cover_width;
  this.cover_height = cover_height;
  this.cover_aspect_ratio = cover_width / cover_height;
  this.create_neccessary_div();
  this.start_widget();
  this.highlight_item($(this.widget_exp + ' ul li:first a').attr('id'), true);
}

StoryBoard.prototype = {
  create_neccessary_div: function() {
    var self = this;
    $(self.widget_exp + ' h2').after('<div id="'+self.item_id_prefix+'-preview-board"><div id="'+self.item_id_prefix+'-covers"></div><div id="'+self.item_id_prefix+'-slider"><div></div></div></div>');
  },
  
  start_widget: function() {
    var self = this;
    var covers = $(self.widget_exp + ' ul li');
    self.images_count = covers.length
    
    $(function() {
      $('#' + self.item_id_prefix+'-slider div').slider({
         value:0,
         min: 0,
         max: self.images_count - 1,
         step: 1,
         slide: function(event, ui) {
           self.highlight_item(self.item_id_prefix + ui.value, true);
         }
       });
    });
    
    var first_5_acc_height = 0;
    covers.each(function(i) {
      id = self.item_id_prefix + i;
      image_id = id + '-cover';
      cover_obj = $(this).find('a:first');
      cover_obj.attr('id', image_id);
      cover_obj.clone().appendTo($('#'+self.item_id_prefix+'-covers'));
      cover_obj.remove();
      $(this).find('a:first').attr('id', id);
      if (i <= 5) {
        first_5_acc_height += $(this).height();
      }
    });
    
    $('#'+self.item_id_prefix+'-covers').css('width', self.cover_width * self.images_count);
    $('#'+self.item_id_prefix+'-preview-board #'+self.item_id_prefix+'-covers').css('height', self.cover_height);
    $(self.widget_exp + ' ul li a').mouseenter(function() {
      self.highlight_item($(this).attr('id'), false);
    });
    
    // $(self.widget_exp + ' ul li a').lightBox();
    if (self.images_count > 5) {
      $(self.widget_exp + ' ul').css('height', first_5_acc_height);
      $(self.widget_exp + ' ul').jScrollPane();
    }
  },
  
  highlight_item: function(id, is_from_cover) {
    var self = this;
    var cover_id = id + '-cover';
    
    // Highlight the suitable ul li list item
    $(self.widget_exp + ' ul li a').removeClass('selected');
    $('#' + id).addClass('selected');
    
    // Slide the covers
    var has_reached_target = false;
    var reached_first_element_after_reached_target = false;
    var reached_id = 0;
    var images = $(self.widget_exp + ' #'+self.item_id_prefix+'-preview-board #'+self.item_id_prefix+'-covers a');
    var images_container = $(self.widget_exp + ' #'+self.item_id_prefix+'-preview-board #'+self.item_id_prefix+'-covers');
    var acc_height = 0;
    images.stop(true);
    images.removeClass('selected');
    images.each(function(i) {
      current_id = $(this).attr('id');
      if (current_id == cover_id) {
        var item = $('#' + current_id);
        item.animate({ 
            width: self.cover_width.toString() + 'px',
            height: self.cover_height.toString() + 'px',
            opacity: 1,
            left: ((60 * i) - 40).toString() + 'px',
            marginTop: '0'
          }, 200 );
        has_reached_target = true;
        reached_id = i;
        item.css('z-index', 100);
        item.addClass('selected');
        $('#' + self.item_id_prefix+'-slider div').slider('value', i);
        $(this).unbind('click');
        // $(this).lightBox();
        if (is_from_cover && self.images_count > 5) { $(self.widget_exp + ' ul')[0].scrollTo(acc_height); }
      } else if (!has_reached_target) {
        var item = $('#' + current_id);
        item.animate({ 
          width: "50px",
          height: (Math.round(50/self.cover_aspect_ratio)).toString()+'px',
          opacity: 0.4,
          left: (60 * i).toString() + 'px',
          marginTop: '30px'
          }, 200);
        var item_height = $('#'+current_id.substring(0, current_id.length - 6)).parent().height();
        // alert(item_height);
        acc_height += item_height + 2;
        item.css('z-index', i);
        $(this).unbind('click');
        item.click(function() {
          if (!$(this).hasClass('selected')) {
            current_id = $(this).attr('id');
            self.highlight_item(current_id.substring(0, current_id.length - 6), true);
            return false;
          }
        });
      } else if (has_reached_target) {
        var item = $('#' + current_id);
        item.animate({ 
          width: "50px",
          height: (Math.round(50/self.cover_aspect_ratio)).toString()+'px',
          opacity: 0.4,
          left: ((60 * i) + self.cover_width - 130).toString() + 'px',
          marginTop: '30px'
          }, 200);
        item.css('z-index', i);
        $(this).unbind('click');
        item.click(function() {
          if (!$(this).hasClass('selected')) {
            current_id = $(this).attr('id');
            self.highlight_item(current_id.substring(0, current_id.length - 6), true);
            return false;
          }
        });
      }
    });
    images_container.animate({
      marginLeft: ((-1 * reached_id * 60) + 85).toString() + 'px'
    }, 100);
  }
};