$(document).ready(function() {
  var tabs = new Tabs();
  tabs.activate();
  var carousel = new Carousel();
  carousel.activate();
  
  var carouselItems = $("div#images > div > div > ul > li").length;
  var carouselItemWidth = parseInt($("div#images > div > div > ul > li").css('width')) + 
    parseInt($("div#images > div > div > ul > li:eq(1)").css('margin-left'));
  var carouselWidth = carouselItems * carouselItemWidth;
  
  //$('div#images div div ul').css('min-width', carouselWidth);
  
   $("div#images div ul li img").attr('src', function (index, attr) {
        return attr.replace('.jpg', '_thumb.jpg');
    });
  
  $("div#images > img").attr('src', function (index, attr) {
      return $("div#images div ul li:first img").attr('src');
    });
  
  $("div#images > img").attr('src', function (index, attr) {
      return attr.replace('_thumb.jpg', '.jpg')
    });
  
  if ( $('div#images div div ul li img').length == 0 )
  {
      $('div#images > img').remove();
      $('div#images > div').remove();
      $('div#images').append('<h5 style="padding-bottom:300px;">This product is currently being tested and we hope to release it soon. Please check back periodically for updates.</h5>');
  }
});

function Tabs() {
  var self = this;
  self.currentTabIndex = 0;
  self.info = $("#overviewText, #techText, #specText");
  
  self.activate = function() {
  var index  = 0;
    $("#details > ul:first-child > li").each(function() {
      $(this).click(self.generateTabSwitch(index));
      index++;
    });
  };

  self.generateTabSwitch = function (tabIndex) {
      return function () {
          $("li.clicked").removeClass("clicked");
          $(this).addClass("clicked");
          $(self.info[self.currentTabIndex]).addClass("hidden");
          $(self.info[tabIndex]).removeClass("hidden");
          self.currentTabIndex = tabIndex;
      };
  };
}

function Carousel() {
  var self = this;
  self.mainImage = $("#images > img");
  self.carouselItems = $("#images > div > div > ul > li");
  self.selectedItem = self.carouselItems.find(">img:eq(0)");
  self.shiftDegree = $("#images > div > div").width();
  self.spacing = parseInt($(self.carouselItems[1]).css("margin-left"));
  self.itemWidth = self.carouselItems.width();
  self.currentOffset = 0;
  self.container = $("#images > div ul");

  self.activate = function () {
      $("#leftArrow").click(self.shiftRight);
      $("#rightArrow").click(self.shiftLeft);
      var currentPos = 0;
      var increment = self.spacing + self.itemWidth;
      self.carouselWidth = (self.carouselItems.length * (self.itemWidth + self.spacing)) - self.spacing + 6;
      self.lowerLimit = (self.carouselWidth * -1) + $("#images > div > div").width();
      //self.container.css("width", self.carouselWidth + 6);
      self.selectedItem = $(self.carouselItems[0]);
      self.selectedItem.addClass("selection");
      self.mainImage.attr("src", self.selectedItem.attr("src"));
      self.carouselItems.each(function () {
          currentPos += increment;
          $(this).click(function () {
              self.selectedItem = $(this);
              $(".selection").removeClass("selection");
              self.selectedItem.addClass("selection");
              self.selectedItem = $(this).find(">img");
              var source = self.selectedItem.attr("src");
              source = source.substring(0, source.indexOf("_thumb")) + '.jpg';
              self.mainImage.attr("src", source);
          });
      });
  };

  self.shiftLeft = function () {
      if (self.currentOffset > self.lowerLimit) {
          var shift;
          if (self.currentOffset - self.shiftDegree < self.lowerLimit) {
              shift = self.currentOffset - self.lowerLimit;
              self.currentOffset = self.lowerLimit;
          }
          else {
              shift = self.shiftDegree;
              self.currentOffset -= self.shiftDegree;
          }
          self.container.animate({
              left: "-=" + shift
          }, 1000);
      }
  };
  
  self.shiftRight = function() {
    if (self.currentOffset < 0) {
      var shift;
      if (self.currentOffset + self.shiftDegree >= 0) {
        shift = self.currentOffset * -1;
        self.currentOffset = 0;
      }
      else {
        shift = self.shiftDegree;
        self.currentOffset += self.shiftDegree;
      }
      self.container.animate({
        left: "+=" + shift
      }, 1000);
    }
  };
}