if (navigator.userAgent.indexOf("Firefox")<=-1) {

var console = {
  log : function(o){
    alert(o);
  }
};
}

var Slider = function(id, config){
  this.set({
    MODE_VERTICAL       : 0,
    MODE_HORIZONTAL     : 1,
    BEHAVIOUR_CLICK     : 1,
    BEHAVIOUR_MOUSEOVER : 0,
    SCROLL_RELATIVE     : 0,
    SCROLL_ABSOLUTE     : 1,
    LISTCONTAINER_SIZE_RELATIVE : 0,
    LISTCONTAINER_SIZE_ABSOLUTE : 1,
    slideView           : null,
    slideListContainer  : null,
    slideList           : null,
    config              : null,
    thumbnails          : [],
    index               : 0,
    view                : null,
    buttons             : {
                            next      : null,
                            previous  : null
    },
    previousThumb       : null,
    showCurrent         : function (){
      var index = 0;
      // try to define an index according to the visited url
      for(var i=0; i<this.config.thumbnails.length;i++){
        if(!!this.config.thumbnails[i].LinkUrl &&
        (this.config.thumbnails[i].LinkUrl == window.location.href || this.config.thumbnails[i].LinkUrl == window.location.pathname)){
          index = i;
          break;
        }
      }

      this.show(index, 0);
    },
    tryNavigateLink            : function (index){
      if(
        index >=0 &&
        index < this.config.images.length &&
        !!this.config.thumbnails[index].LinkUrl &&
        this.config.thumbnails[index].LinkUrl != ''
      ){
        window.location.href = this.config.thumbnails[index].LinkUrl;
        return true;
      }
      return false;
    },
    show                : function(index, duration)
    {
      if((duration != 0 && !!!duration) || duration < 0){
        duration = this.config.list.scrollTime;
      }

      if(this.config.list.scrollMode == this.SCROLL_RELATIVE)
      {
        duration *= Math.abs(this.index - index);
      }

      if (index >= 0 && index < this.config.images.length) {

        //toggle navigation buttons
        if(index == 0 && this.config.images.length == 1){
          this.buttons.previous.addClass('SlideBtnHide');
          this.buttons.next.addClass('SlideBtnHide');
        }else if(index == 0){
          this.buttons.previous.addClass('SlideBtnHide');
        }else if(index == this.config.images.length -1){
          this.buttons.next.addClass('SlideBtnHide');
        }else{
          this.buttons.previous.removeClass('SlideBtnHide');
          this.buttons.next.removeClass('SlideBtnHide');
        }

        var url = this.config.images[index]['ImgUrl'];

        // create the view img element if it does not exist
        if (this.view == null) {
          this.view = $(document.createElement("img")).appendTo(this.slideView);
        }

        // remove the previous selected div if there is any
        if(this.previous >= 0 && this.previous < this.config.thumbnails.length){
          this.thumbnails[this.previous].parent().removeClass("selected");
        }

        // calculate scroll positions
        var x,y, axe;

        // select the axe were going to scroll
        axe = this.config.list.mode == this.MODE_VERTICAL ? this.config.thumb.height : this.config.thumb.width ;

        // calculate the raw position
        x = axe * index - this.config.list.amount * axe / 2;

        // even adjustment so the thumb will be in the center
        if(this.config.list.amount % 2 == 0){
          x += axe / 2;
        }

        // adjustment for the margin
        x += this.config.thumb.margin * index * 2;
        x -= this.config.thumb.margin * 2;

				// adjustment for borders
        x += this.config.thumb.border * index *2;
        x -= this.config.thumb.border * 2;

        if(x < 0){
          x =0;
        }

        y = 0;

        // scroll to position
        var ax = this.config.list.mode == this.MODE_HORIZONTAL ? 'x' : 'y';
        this.slideListContainer.scrollTo(x, y, {axis : ax, 'duration' : duration});
        this.thumbnails[index].parent().addClass("selected");

        if(
          !!!this.view.attr('src') ||
          this.view.attr('src') == '' ||
          !!!this.config.thumbnails[index].LinkUrl ||
          this.config.thumbnails[index].LinkUrl == ''
        ){
          this.slideDescription.text(this.config.images[index].Description);
          this.view.attr("src", url);
        }

        this.index = index;
        this.previous = index;
      }
    },
    showNext                : function()
    {

      var index = this.index;
      if (index++ < this.config.images.length) {
        if(!self.tryNavigateLink(index))
            self.show(index);
      }
    },
    showPrevious            : function ()
    {
      if (this.index-1 >= 0) {
        if(!self.tryNavigateLink(this.index-1))
            self.show(this.index-1);
      }
    },
    getElementsByClass : function(searchClass,node,tag) {
      var classElements = new Array();
      if ( node == null ) {
          node = this.id !='' ? document.getElementById(this.id) : document.body;
      }
      if ( tag == null )
              tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
              if ( pattern.test(els[i].className) ) {
                      classElements[j] = els[i];
                      j++;
              }
      }
      return $(classElements);
    }
  });

  // constructor
  this.id = id;
  this.parent = this.id != '' ? $("#"+this.id) : $(document.body);
  this.config = config;

  this.slideView          = this.getElementsByClass("slideView");
  this.slideListContainer = this.getElementsByClass("slideListContainer");
  this.slideList          = this.getElementsByClass("slideList");
  this.slideDescription   = this.getElementsByClass("slideDescription");

  var border  = this.config.thumb.border;

  // somehow IE isnt very precise with the measurements so i had to add 10 as margin
  this.slideView.css({
    height : this.config.viewer.height + 10,
    width : this.config.viewer.width + 10
  });

  var containerMeasurements = {
    height : this.config.thumb.height,
    width : this.config.thumb.width
  }

  // set container measurements
  var containerRelative  = this.config.list.containerSize == this.LISTCONTAINER_SIZE_RELATIVE &&
                            this.config.thumbnails.length < this.config.list.amount;
  var amount = containerRelative ? this.config.thumbnails.length : this.config.list.amount;

  if (this.config.list.mode == this.MODE_VERTICAL) {
    containerMeasurements.height *= amount;
    containerMeasurements.height += amount * this.config.thumb.margin  * 2 +  (amount-1) * border * 2;
     this.slideListContainer.css({'padding-left' : this.config.list.padding, 'padding-right' : this.config.list.padding});
  }else{
      containerMeasurements.width *= amount;
      containerMeasurements.width += amount * this.config.thumb.margin * 2 + (amount-1) * border * 2;
      this.slideListContainer.css({'padding-top' : this.config.list.padding, 'padding-bottom' : this.config.list.padding});
  }

  this.slideListContainer.css({
    height : containerMeasurements.height + 2 * border,
    width : containerMeasurements.width + 2 * border
  });

  var thumbAmount = this.config.thumbnails.length;

  // set the list measurements
  var listMeasurements = {
     height : this.config.thumb.height,
     width  : this.config.thumb.width
  }

  if (this.config.list.mode == this.MODE_VERTICAL) {
    listMeasurements.height *= thumbAmount;
    listMeasurements.height += thumbAmount * this.config.thumb.margin * 2 + thumbAmount * border * 2;
    listMeasurements.width += border * 2;
  }else{
    listMeasurements.width *= thumbAmount;
    listMeasurements.width += thumbAmount * this.config.thumb.margin * 2 + thumbAmount * border * 2;
  }

  this.slideList.css({
    height : listMeasurements.height,
    width : listMeasurements.width,
    minWidth : listMeasurements.width
  });

  // create thumbnails
  var self = this;
  var margin =  this.config.thumb.margin;
  var padding = this.config.list.padding;

  for (var i=0; i<thumbAmount; i++) {

    // wrap the image in a div so we can calculate scroll positions
    var div = $(document.createElement('div')).css({
      'width' : this.config.thumb.width,
      'height' : this.config.thumb.height
    }).attr({
        'id'  : 'thumbnail'+i
    });
    div.appendTo(this.slideList);

    var img = $(document.createElement("img")).attr({
        src : this.config.thumbnails[i]['ImgUrl']
      }).appendTo(div);

      if(this.config.list.mode == this.MODE_HORIZONTAL){
       div.css({'margin-left' : margin, 'margin-right' : margin, 'border-size': border});
      }else{
       div.css({'margin-top' : margin, 'margin-bottom' : margin, 'border-size': border });
      }

    // add events to the div
    this.thumbnails.push(img);
    var handleEvent = function (e){
          e.preventDefault();
          var index = $(this).attr('id').replace("thumbnail", "");
          if(!self.tryNavigateLink(index))
            self.show(index);
        }
      if(this.config.list.behaviour == this.BEHAVIOUR_CLICK){
        div.click(handleEvent);
      }else{
        div.mouseover(handleEvent);
      }
  }

  this.buttons.previous = this.getElementsByClass("slidePrevious");
  this.buttons.next = this.getElementsByClass("slideNext");

  if(containerRelative){
    this.buttons.previous.addClass('DisabledSlideButton');
    this.buttons.next.addClass('DisabledSlideButton');
  }


  this.buttons.previous.click(function(e){
    e.preventDefault();
    self.showPrevious();
  });

  this.buttons.next.click(function(e){
    e.preventDefault();
    self.showNext();
  });

  this.showCurrent();
}

// sets given object properties to this
Slider.prototype.set = function(obj){
  for(prop in obj){
    this[prop]= obj[prop];
  }
}