SubCategoryDisplay.js

var SubCategoryDisplay = (function() {
  function Thumb (element, container) {
    var element = $(element);
    var _selected = element.hasClass('selected');
    var image = function() {
      var parts = $('img', element).attr('src').split(/\//)
      return {
        filename: parts[parts.length-1].split(/\?/)[0],
        id: parts[3]
      }
    }();
    var title = $('h5', element).text();
    var href = $('a', element).attr('href');

    element.click(toggle);
    
    function selected () { return _selected; };
        
    function select () {
      container.thumbs.invoke('deselect');
      container.display.changeTo(self);
      _selected = true;
      element.addClass('selected');
    };
    
    function deselect () {
      _selected = false;
      element.removeClass('selected');
    };
    
    function toggle (e) {
      if (e) { e.preventDefault(); };
      _selected ? deselect() : select();
    };
    
    var self = {
      element: element,
      toggle: toggle,
      select: select,
      deselect: deselect,
      image: image,
      title: title,
      href: href
    };
    return self;
  };
  
  function ThumbCollection (display) {
    var container = function() {
      var element = $('.thumbs', display.container);
      var rightSide = parseInt(element.offset().left + (position().width / 2) + 50);
      var leftSide = parseInt(element.offset().left + (position().width / 2) - 50);
      
      function position () {
        var left = element.position().left;
        var right = left + element.width();
        var width = element.width();
        var height = element.height();
        
        return {
          left: left,
          right: right,
          width: width,
          height: height
        };
      };
      
      return {
        element: element,
        position: position,
        offset: element.offset,
        rightSide: rightSide,
        leftSide: leftSide
      };
    }();
    
    var thumbs_container = function() {
      var element = $('ul', container.element).css({position: 'relative', left: 0});
      var self = this;
      
      function position () {
        var left   = this.left   = parseInt(element.css('left'));
        var right  = this.right  = left + element.width();
        var width  = this.width  = element.width();
        var height = this.height = element.height();
        
        return {
          left: left,
          right: right,
          width: width,
          height: height
        }
      }
      
      function move (e) {
        var distance = 0, current_position = e.pageX;
        if (current_position > container.rightSide && !end()) {
          distance = 3
        } else if (current_position < container.leftSide && !beginning()) {
          distance = -3
        }
        
        element.css({ left: position().left - distance });
      }
      
      function startAnimation (e) {
        if (self.interval !== undefined) { clearInterval(self.interval); };
        self.interval = setInterval(move, 2, e);
        
        container.element.bind('mousemove', startAnimation);
      }
      
      function stopAnimation (e) {
        clearInterval(self.interval);
        container.element.unbind('mousemove');
      }
      

      return {
        element: element,
        position: position,
        move: move,
        startAnimation: startAnimation,
        stopAnimation: stopAnimation
      };
    }();
    
    function end () {
      return thumbs_container.position().right === container.position().right;
    }
    
    function beginning () {
      return thumbs_container.position().left >= 0;
    }
    
    function each (callback) {
      $.each(thumbs, callback);
    };
    
    function invoke (method) {
      $.each(thumbs, function(i, thumb) {
        thumb[method]();
      });
    };

    var thumbs = [];
    $('li', container.element).each(function(i, thumb) {
      thumbs.push(new Thumb(thumb, display));
    });

    container.element.hover(thumbs_container.startAnimation, thumbs_container.stopAnimation);
    var new_width = function() {
      var thumb1 = thumbs[0].element
      var width = parseInt(thumb1.outerWidth()) + parseInt(thumb1.css('margin-right'))
      return thumbs.length * width
    }();
    
    console.log(new_width)
    thumbs_container.element.width(new_width)
      
    return {
      thumbs: thumbs,
      each: each, 
      invoke: invoke
    };
  };
  
  function Display (display) {
    var element      = $('.display', display.container)
    var description  = $('.description', element);
    var title        = $('h5', description);
    var product_link = $('a', description);
    
    function changeTo (thumb) {
      var img = $('img', element);
      var newImg = function() {
        var parts = img.attr('src').split(/\//);
        parts[3] = thumb.image.id;
        parts[parts.length - 1] = thumb.image.filename;
        return $("<img />").attr('src', parts.join("/")).hide();
      }().insertAfter(img);

      img.fadeOut('show').remove();
      newImg.fadeIn('show');
      
      title.text(thumb.title)
      product_link.attr('href', thumb.href)
    }
    
    return {
      changeTo: changeTo
    }
  };
    
  function initialize (element) {
    this.container = $(element);
    this.thumbs = new ThumbCollection(this);
    this.display = new Display(this);
  };
    
  return {
    initialize: initialize
  };
})();