(function($){
  
  // ====================================================================
  // @CaseStudiesSection plugin
  // ====================================================================
  var CaseStudiesSection = function(elem) {
    
    var $this = $(elem),
        $win = $(window),
        $body = $('body'),
        $caseStudiesContainer = $('#case-studies'),
        $caseStudyItems = $caseStudiesContainer.find('.case-study'),
        $caseStudiesList = null,
        $csDisplayTitleContainer= null,
        $csDetailGroupSlider= null,
        $csDetailNav = null,
        $csMediaThumbGroupSlider = null,
        $csMediaNavScrollArea = null,
        _projectNav = null,
        _csDetailNav = null,
        _csListView =  null,
        _curCaseStudyId = null,
        _queuedCaseStudy = null,
        _activateCaseStudyDetail = null,
        _isTransCaseStudy = false,
        _detailSlideDestX = 0,
        _thumbSlideDestX = 0,
        _isActive = false;
    
    // ----------------------------------------------------------------
    // private methods
    // ----------------------------------------------------------------
    function _init() {
      debug.log("CaseStudiesSection :: initialized");
      
      // apply section title plugin to title
      $this.find('.section-title').sectionTitle();
      
      // add padding to the top of section
      $this.find('.regular-content').css('padding-top', '75px');
      
      _createCaseStudyDisplay();
      _createCaseStudyListView();
      
      // grab our case study display element references now that the display has been created
      $csDisplayTitleContainer = $('#cs-header .label');
      $csDetailGroupSlider = $('#cs-detail-group-slider');
      $csDetailNav = $('#cs-detail-navigation');
      $csMediaNavScrollArea = $('.cs-media-nav-scroll-area');
      $csMediaThumbGroupSlider = $('#cs-media-thumb-group-slider');
            
      // detach the actual case study items' markup, case study data will be attached to the display as needed
      $caseStudyItems.detach();
      
      // ----------------------------------------------------------------
      // init plugins
      // ----------------------------------------------------------------
      _csDetailNav = $csDetailNav.caseStudiesDetailNav().data('CaseStudiesDetailNav');
      _csListView = $caseStudiesList.caseStudiesList().data('CaseStudiesList');
      _projectNav = $this.find('.project-navigation').caseStudiesProjectNav().data('CaseStudiesProjectNav');
            
      if (MomentumWW.IS_IPAD) { // gpu transforms on ipad
        $csDetailGroupSlider.css({
          '-webkit-transition-property': '-webkit-transform',
          '-webkit-transform': 'translate3d(0px, 0px, 0px)',
          '-webkit-transition-duration': '0ms'
        });
        
        $csMediaThumbGroupSlider.css({
          '-webkit-transition-property': '-webkit-transform',
          '-webkit-transform': 'translate3d(0px, 0px, 0px)',
          '-webkit-transition-duration': '0ms'
        });
      }
      
      _setCaseStudy(0);
    }; // _init()
    
    // ----------------------------------------------------------------
    
    function _createCaseStudyDisplay() {

      var caseStudiesDisplayHTML = '\
        <div id="case-study-display">\
        \
          <div class="cs-display-col-left">\
          \
            <div id="cs-header">\
              <div class="cs-header-bg">\
                <div class="light-bg"></div>\
                <div class="dark-bg"></div>\
              </div>\
              <div class="project-title-container">\
                <div class="top"></div>\
                <div class="label"></div>\
                <div class="right"></div>\
              </div>\
              <div class="project-navigation">\
                <a class="list-btn" href="#"></a>\
                <a class="prev" href="#"></a>\
                <a class="next" href="#"></a>\
              </div>\
            </div>\
            \
            <div id="cs-detail-container">\
              <div id="cs-detail-group-slider">\
              </div>\
            </div>\
          \
          </div>\
        \
        </div>\
        \
        <div id="cs-detail-navigation" class="cs-display-col-right">\
        \
          <p class="details">DETAILS:</p>\
          <a class="cs-info-detail-link" href="challenge">CHALLENGE</a>\
          <a class="cs-info-detail-link" href="solution">SOLUTION</a>\
          <a class="cs-info-detail-link last" href="result">RESULT</a>\
          \
          <div id="cs-media-nav">\
          \
            <div class="cs-media-nav-scroll-btn prev"></div>\
            \
            <div class="cs-media-nav-scroll-area">\
              <div id="cs-media-thumb-group-slider">\
              </div>\
            </div>\
            \
            <div class="cs-media-nav-scroll-btn next"></div>\
          \
          </div>\
        \
        </div>';
        
      $caseStudiesContainer.prepend($.shiv(caseStudiesDisplayHTML));
      
    }
    
    // ----------------------------------------------------------------
    
    function _createCaseStudyListView () {
      
      var caseStudiesListViewHTML = '\
            <div id="case-studies-list">\
            \
              <div class="cs-list-close-wrap">\
                <a class="large-close-button cs-list-close-button" href="#">\
                  <h1>X</h1>\
                  <p>CLOSE</p>\
                </a>\
              </div>\
              \
              <ul class="cs-list-items"></ul>\
            \
            </div>',
          newListItemTemplateHTML = '\
            <li class="cs-list-item">\
              <div class="center-container clearfix">\
                <a class="case-studies-list-link" href="#" data-case-study-id="{case_study_id}">\
                  <img src="{thumbnail_uri}" width="171" height="98">\
                  <h3 class="list-link-title">{project_title}</h3>\
                </a>\
              </div>\
            </li>',
          listItemsHTML = '';
      
      // build markup for list items
      $caseStudyItems.each(function (){
        var $caseStudy = $(this);
        
        var listItemHTML = newListItemTemplateHTML;
        listItemHTML = listItemHTML.split('{case_study_id}').join($caseStudy.attr('data-case-study-id'));
        listItemHTML = listItemHTML.split('{project_title}').join($caseStudy.find('.cs-project-title').text());
        listItemHTML = listItemHTML.split('{thumbnail_uri}').join($caseStudy.find('.cs-thumb').attr('src'));
        
        listItemsHTML += listItemHTML;
      });
      
      $caseStudiesList = $.shiv(caseStudiesListViewHTML);
      $caseStudiesList.find('.cs-list-items').append($.shiv(listItemsHTML));
      $this.append($caseStudiesList);
      
    }
    
    // ----------------------------------------------------------------
    
    function _activate() {
      
      document.title = "MomentumWW / Cases";
			debug.log("CaseStudiesSection :: _activate()");
			
			_isActive = true;
			
      _projectNav.activate();
      if (!_csDetailNav.getIsActive()) {
        _csDetailNav.activate();
      }
      $body.bind(MomentumWW.events.CASE_STUDY_PREV_NEXT, _onCaseStudyPrevNext);
      $body.bind(MomentumWW.events.CASE_STUDY_DETAIL_SELECTED, _onCaseStudyDetailSelected);
      $body.bind(MomentumWW.events.CASE_STUDY_SELECTED, _onCaseStudySelected);
      
      $body.bind(MomentumWW.events.OPEN_CASE_STUDIES_LIST, _openCSListView);
      $body.bind(MomentumWW.events.CLOSE_CASE_STUDIES_LIST, _closeCSListView);
      
      if (_activateCaseStudyDetail !== null) {
        _setCaseStudyDetail(
          _activateCaseStudyDetail.caseStudyId, 
          _activateCaseStudyDetail.type, 
          _activateCaseStudyDetail.detailId,
          true
        );
      }
      
    }
    
    function _deactivate() {
      //debug.log("CaseStudiesSection :: _deactivate()");
      
      _isActive = false;
      
      var $activeDetail = $csDetailGroupSlider.find('.cs-detail.active'),
          curDetailType = $activeDetail.attr('data-type'),
          curDetailId = null;
      
      if (curDetailType.indexOf('media') > -1) {
        curDetailType = 'media';
        curDetailId = $activeDetail.find('.cs-media-item.active').attr('data-detail-id');
      } else {
        curDetailId = $activeDetail.attr('data-detail-id');
      }
      
      _activateCaseStudyDetail = {
        caseStudyId: _curCaseStudyId,
        type: curDetailType,
        detailId: curDetailId
      };
        
      _setCaseStudyDetail(_curCaseStudyId, curDetailType, null, false);
      
      _projectNav.deactivate();
      
      if (_csDetailNav.getIsActive()) {
        _csDetailNav.deactivate();
      }
      
      $body.unbind(MomentumWW.events.CASE_STUDY_PREV_NEXT, _onCaseStudyPrevNext);
      $body.unbind(MomentumWW.events.CASE_STUDY_DETAIL_SELECTED, _onCaseStudyDetailSelected);
      $body.unbind(MomentumWW.events.CASE_STUDY_SELECTED, _onCaseStudySelected);
      
      $body.unbind(MomentumWW.events.OPEN_CASE_STUDIES_LIST, _openCSListView);
      $body.unbind(MomentumWW.events.CLOSE_CASE_STUDIES_LIST, _closeCSListView);
    }
    
    function _onCaseStudySelected(e, caseStudyId) {
      
      debug.log("CaseStudiesSection :: _onCaseStudySelected :: caseStudyId: "+caseStudyId);
      _setCaseStudy(caseStudyId);
      
    }
    
    function _onCaseStudyPrevNext(e, direction) {
      
      _setCaseStudy(_curCaseStudyId + direction);
      
    }
    
    function _onCaseStudyDetailSelected(e, type, detailId) {
      
      _setCaseStudyDetail(_curCaseStudyId, type, detailId, true);
      
    }
    
    // ----------------------------------------------------------------
    
    function _setCaseStudy(caseStudyId) {
      
      var oldCaseStudyId = _curCaseStudyId,
          $curCSDetailGroup = null,
          $outCSDetailGroup = null,
          $curCSMediaThumbGroup = null,
          $outCSMediaThumbGroup = null,
          isRemovingVideo = false,
          detailW = 0,
          thumbW = 0;
                
      if (caseStudyId === _curCaseStudyId) {
        // already at the case study trying to be set, do nothing
        return;
      }
      
      if (_isTransCaseStudy) {
        // already animating to a case study that was just set
        // let the animation finish and queue this attempt to run after this one finishes
        //_queuedCaseStudy = caseStudyId;
        return;
      }
            
      // we're going through with setting the case study
      _curCaseStudyId = caseStudyId;
      
      if (_curCaseStudyId === null ) {
        // clearing the entire case study display (for deactivation)
        if (oldCaseStudyId === null) {
          return;
        }
        
        _setCaseStudyDetail(oldCaseStudyId, 'media', null, false);

        $outCSDetailGroup = $csDetailGroupSlider.find('.cs-detail-group');
        $outCSMediaThumbGroup = $csMediaThumbGroupSlider.find('.cs-media-thumb-group');
        $outCSDetailGroup.remove();
        $outCSMediaThumbGroup.remove();
      }
      
      // get the content elements for the case study being set
      $curCSDetailGroup = _getCSDetailGroup(_curCaseStudyId);
      $curCSMediaThumbGroup = _getCSMediaThumbGroup(_curCaseStudyId);
      
      _updateTitle();
      
      _updateProjectNav();
      
      _csListView.setSelectedByIndex(_curCaseStudyId);
      
      if (_csDetailNav.getIsActive()) {
        _csDetailNav.deactivate();
      }
      
      if (oldCaseStudyId === null) {
        
        // nothing exists to slide yet just append cur and fade in
        $csDetailGroupSlider.append($curCSDetailGroup);
        $csMediaThumbGroupSlider.append($curCSMediaThumbGroup);
        
        _setCaseStudyDetail(_curCaseStudyId, 'media', '0', true);
                
        _csDetailNav.activate();
        
      } else {
        // slide detail container based on relative location of cur project index to old project index
        
        // grab references to the elements being slid out of view
        $outCSDetailGroup = $csDetailGroupSlider.find('.cs-detail-group');
        $outCSMediaThumbGroup = $csMediaThumbGroupSlider.find('.cs-media-thumb-group');
                
        // mark the elements being slid out of view for removal        
        $outCSDetailGroup.addClass('out');
        $outCSMediaThumbGroup.addClass('out');
        
        // lock in the widths of the detail to use for slide animation (since that area can be resized normally)
        detailW = $outCSDetailGroup.outerWidth();
        thumbW = $csDetailNav.outerWidth();
        
        $curCSDetailGroup.css('width', detailW);
        $outCSDetailGroup.css('width', detailW);
        
        // double up widths of the slider to accommodate for the incoming content
        $csDetailGroupSlider.css('width',  (2 * detailW + 2)+'px');
        $csMediaThumbGroupSlider.css('width', (2 * thumbW + 2) + 'px');
                
        // determine which way to slide
        if (_curCaseStudyId > oldCaseStudyId) {
          // setup for doing a slide left
          
          // add elements that are going to slide into view after existing elements in DOM hierarchy
          $csDetailGroupSlider.append($curCSDetailGroup);
          $csMediaThumbGroupSlider.append($curCSMediaThumbGroup);
          
          // set slide destination
          _detailSlideDestX = -detailW;
          _thumbSlideDestX = -thumbW;
          
        } else {
          //  setup for doing slide right

          // add elementsthat are going to slide into view before existing elements in DOM hierarchy
          $csDetailGroupSlider.prepend($curCSDetailGroup);
          $csMediaThumbGroupSlider.prepend($curCSMediaThumbGroup);
          
          // offset slide container to the left
          if (MomentumWW.IS_IPAD) {

            $csMediaThumbGroupSlider.css({
              '-webkit-transition-duration': '0ms',
              '-webkit-transform': 'translate3d('+(-thumbW)+'px, 0px, 0px)'
            });

            $csDetailGroupSlider.css({
              '-webkit-transition-duration': '0ms',
              '-webkit-transform': 'translate3d('+(-detailW)+'px, 0px, 0px)'
            });

          } else {
            $csDetailGroupSlider.css('left', -detailW+'px');
            $csMediaThumbGroupSlider.css('left', -thumbW+'px');
          }
          
          // set slide destination
          _detailSlideDestX = 0;
          _thumbSlideDestX = 0;
          
        }
                 
        // always start out with the first media item (video) set
        // set addNewVideo prop to false so it can be done after transition
        _setCaseStudyDetail(_curCaseStudyId, 'media', '0', false);
        _csDetailNav.setSelectedInfoLink(null);
        
        _isTransCaseStudy = true;
        
        // stop and remove video if playing
        var $activeDetail = $outCSDetailGroup.find('.cs-detail.active');      
        if ($activeDetail.attr('data-type') === "media-video") {
          // remove the video first
          $outCSDetailGroup.bind(MomentumWW.events.REMOVE_VIDEO_COMPLETE, _onOutDetailGroupVideoRemoved);
          _removeVideoPlayer($outCSDetailGroup);
          
        } else {  
          
          _doSlideDetailGroups();
          
        }
      
      } 
      
    }
    
    // ----------------------------------------------------------------
    
    function _onOutDetailGroupVideoRemoved() {
      var $outCSDetailGroup = $(this);
      
      $outCSDetailGroup.unbind(MomentumWW.events.REMOVE_VIDEO_COMPLETE, _onOutDetailGroupVideoRemoved);
            
      _doSlideDetailGroups();
    }
    
    // ----------------------------------------------------------------
    
    function _getCSDetailGroup(caseStudyId) {
      /* Structure:

        <div class="cs-detail-group">
        
          <div class="cs-detail cs-info-detail" data-detail-id="challenge">...</div>
          <div class="cs-detail cs-info-detail" data-detail-id="solution">...</div>
          <div class="cs-detail cs-info-detail" data-detail-id="results">...</div>
          
          <div class="cs-media-detail">
            <p class="description"></p>
          </div>
        
        </div>
      
      */
      
      // create empty detail group
      var $csDetails = $.shiv('<div class="cs-detail-group" data-case-study-id="'+caseStudyId+'"></div>'),
          $caseStudy = $caseStudyItems.eq(caseStudyId),
          $mediaDetail = null;
      
      // add cloned info details
      $csDetails.append($caseStudy.find('.cs-info-detail').clone());
      $csDetails.find('.cs-info-detail').addClass('hidden').attr('data-type', 'info');
      
      // add media detail 
      $csDetails.append($.shiv('<div class="cs-detail cs-media-detail" data-type="media"></div>'));
      $mediaDetail = $csDetails.find('.cs-media-detail')
      $mediaDetail.append($.shiv('<div class="cs-description">\
                                  <p>'+$caseStudy.find('.cs-description').text()+'</p>\
                                </div>'));
      
      return $csDetails;
    }
    
    // ----------------------------------------------------------------
    
    function _getCSMediaThumbGroup(caseStudyId) {
      
      var $thumbGroup = $.shiv('<div class="cs-media-thumb-group"></div>'),
          $caseStudy = $caseStudyItems.eq(caseStudyId),
          $mediaThumbs = $caseStudy.find('.cs-media-thumb').clone();
      
      // have to temporarily attach to the DOM to position thumbNames based on their height values
      $thumbGroup.css({
        'position':'absolute',
        'left':'-10000px',
        'top':'0px'
      });
      $csMediaNavScrollArea.append($thumbGroup); // scroll area has overflow hidden
      // position thumbNames based on their height values
      $thumbGroup.append($mediaThumbs);
      
      $mediaThumbs.each(function () {
        var $mediaThumb = $(this),
            $mediaThumbImg = $mediaThumb.find('img'),
            overImgURI = $mediaThumbImg.attr('data-rollover-uri'),
            $thumbName = $mediaThumb.find('.media-name');
            
        $thumbName.css('bottom', -$thumbName.outerHeight());
        $mediaThumbImg.after($.shiv('<img src="'+overImgURI+'" class="cs-media-thumb-over" width="171" height="98">'));
      });
      
      $mediaThumbs.preventDefaultClick();
      _csDetailNav.setSelectedMediaThumb( 0, $mediaThumbs);
      
      $thumbGroup.detach();
      $thumbGroup.css({
        'position':'relative',
        'left':'0'
      });
      
      return $thumbGroup;
      
    }
    
    // ----------------------------------------------------------------
    
    function _updateTitle() {
      
      var $oldTitle = $csDisplayTitleContainer.find('.cs-project-title');
      
      if ($oldTitle.length > 0) {
        $oldTitle.animate({opacity:0}, 300, "easeOutQuad", function() {
          $oldTitle.remove();
          _updateTitleIn();          
        });
      } else {
        _updateTitleIn();
      }
      
    }
    
    function _updateTitleIn() {
      
      var $curTitle = $caseStudyItems.eq(_curCaseStudyId).find('.cs-project-title').clone();
      
      $curTitle.css({
       'opacity': '0',
       'float':'left'
      });
      $body.append($curTitle);
      var destW = $curTitle.outerWidth();
      $csDisplayTitleContainer.append($curTitle);
      
      $csDisplayTitleContainer.animate({width: destW}, 350, "easeInOutQuad", function() {
        $curTitle.animate({opacity:1}, 300, "easeOutQuad");
      });
      
    }
    
    // ----------------------------------------------------------------
    
    function _updateProjectNav() {
   
      if (_curCaseStudyId == 0) {
        _projectNav.setPreviousEnabled(false);
      } else {
        _projectNav.setPreviousEnabled(true);
      }

      if (_curCaseStudyId == $caseStudyItems.length - 1) {
        _projectNav.setNextEnabled(false);
      } else {
        _projectNav.setNextEnabled(true);
      }
      
    }
    
    function _doSlideDetailGroups() {
      
      if (MomentumWW.IS_IPAD) {
        
        $csDetailGroupSlider[0].addEventListener('webkitTransitionEnd', _onSlideDetailGroupsComplete, false);
        
        $csMediaThumbGroupSlider.css({
          '-webkit-transition-duration': '700ms',
          '-webkit-transform': 'translate3d('+_thumbSlideDestX+'px, 0px, 0px)'
        });
      
        $csDetailGroupSlider.css({
          '-webkit-transition-duration': '700ms',
          '-webkit-transform': 'translate3d('+_detailSlideDestX+'px, 0px, 0px)'
        });
        
      } else {
        
        $csMediaThumbGroupSlider.animate({left:_thumbSlideDestX}, 1000, "easeInOutExpo");
        $csDetailGroupSlider.animate({left:_detailSlideDestX}, 1000, "easeInOutExpo", _onSlideDetailGroupsComplete);
      
      }
    }
    
    function _onSlideDetailGroupsComplete() {
      
      var $curCSDetailGroup = null,
          $outCSDetailGroup = $csDetailGroupSlider.find('.out'),
          $outCSMediaThumbGroup = $csMediaThumbGroupSlider.find('.out');
          
      // remove elements that were being slid out of view
      $outCSDetailGroup.remove();
      $outCSMediaThumbGroup.remove();
          
      // reset sliders to 0 "start" position
      if (MomentumWW.IS_IPAD) {
        
        $csDetailGroupSlider[0].removeEventListener('webkitTransitionEnd', _onSlideDetailGroupsComplete);
        
        $csDetailGroupSlider.css({
          'width': '100%',
          '-webkit-transition-duration': '0ms',
          '-webkit-transform': 'translate3d(0px, 0px, 0px)'
        });
        
        $csMediaThumbGroupSlider.css({
          'width': '100%',
          '-webkit-transition-duration': '0ms',
          '-webkit-transform': 'translate3d(0px, 0px, 0px)'
        });
        
      } else {
        $csDetailGroupSlider.css({
          'width': '100%',
          'left': '0px'
        });
        $csMediaThumbGroupSlider.css({
          'width': '100%',
          'left': '0px'
        });
      }
      
      // change detail back to resizable width 
      $curCSDetailGroup = $csDetailGroupSlider.find('.cs-detail-group');
      $curCSDetailGroup.css('width', '100%');
      
      _addVideoPlayer($curCSDetailGroup);
      
      _isTransCaseStudy = false;
      
      _csDetailNav.activate();
      
    }
    
    function _setCaseStudyDetail(caseStudyId, type, detailId, addNewVideo) {
      
      var $csDetailGroup = $csDetailGroupSlider.find('.cs-detail-group[data-case-study-id="'+caseStudyId+'"]'),
          $detailOut = $csDetailGroup.find('.active'),
          $detailIn = (type === "info") 
            ? $csDetailGroup.find('.cs-info-detail[data-detail-id="'+detailId+'"]')
            : $csDetailGroup.find('.cs-media-detail');
          
      if (type === "media") {
        _csDetailNav.setSelectedInfoLink(null);
        _setCaseStudyMediaItem(caseStudyId, detailId, addNewVideo);
      } else {
        // clear any current media display state
        _setCaseStudyMediaItem(caseStudyId, null);
        
        _csDetailNav.setSelectedInfoLink(detailId);
      }
      
      if ($detailOut.length > 0 ) {
        $detailOut.removeClass('active');
        $detailOut.addClass('hidden');
      }
      
      $detailIn.addClass('active');
      $detailIn.removeClass('hidden');
       
    }
    
    function _setCaseStudyMediaItem(caseStudyId, itemId, addNewVideo) {
      
      var $csDetailGroup = $csDetailGroupSlider.find('.cs-detail-group[data-case-study-id="'+caseStudyId+'"]'),
          $mediaDetail = $csDetailGroup.find('.cs-media-detail'),
          $mediaItemOut = $mediaDetail.find('.cs-media-item'),
          $mediaItemIn = _getMediaItem(caseStudyId, itemId);
      
      if ($mediaItemOut.length > 0) {
        $mediaItemOut.removeClass('active');
        $csDetailGroup.bind
        _removeVideoPlayer($csDetailGroup, false);
        $mediaItemOut.remove();
      }
      
      // update thumb selection
      _csDetailNav.setSelectedMediaThumb(itemId);
      
      if (typeof $mediaItemIn === "undefined") {
        return;
      } 
      
      $mediaDetail.prepend($mediaItemIn);
      $mediaDetail.attr('data-type', 'media-'+$mediaItemIn.data('type') );
      
      if ($mediaItemIn.data('type') === 'video' && addNewVideo) {
        _addVideoPlayer($csDetailGroup);
      }
            
    }
    
    function _getMediaItem(caseStudyId, mediaItemId) {
      
      var $caseStudy = $caseStudyItems.eq(caseStudyId),
          $mediaThumb = $caseStudy.find('.cs-media-thumb[data-media-id="'+mediaItemId+'"]'),
          $mediaItem = $.shiv('<div class="cs-media-item active" data-detail-id="'+mediaItemId+'"></div>'),
          mediaType = $mediaThumb.data('media-type');
      
      if ($mediaThumb.length == 0) {
        return;
      }
      
      switch (mediaType) 
      {
        case 'video':
          _initVideoMediaItem($mediaItem, $mediaThumb.attr('href'), $mediaThumb.data('poster-uri'))
          break;
        
        case 'image':
           _initImageMediaItem($mediaItem, $mediaThumb.attr('href'));
          break;
      }        
      
      $mediaItem.data('type', mediaType);
      
      return $mediaItem;
      
    }
    
    function _initVideoMediaItem($mediaItem, videoURI, posterImgURI) {
      
      var $container = $.shiv('\
            <div class="cs-detail-video-container">\
              <div class="cs-detail-video"></div>\
              \
              <div class="cs-detail-video-poster" data-video-uri="'+videoURI+'">\
                <img src="'+posterImgURI+'" >\
                <div class="video-play-icon"></div>\
              </div>\
            </div>'),
          $videoPoster = $container.find('.cs-detail-video-poster'),
          $posterImg = $videoPoster.find('img'),
          $playIcon = $container.find('.video-play-icon');

      $playIcon.css('opacity', '0');
      $mediaItem.append($container);
      $posterImg.bind(MomentumWW.events.PRELOAD_COMPLETE, _onVideoPosterLoaded);
      $posterImg.preloadImg();
      
    }
    
    function _initImageMediaItem($mediaItem, imgURI) {
      
      var $container = $.shiv('<div class="cs-detail-image-container"></div>');
      var $img = $.shiv('<img src="'+imgURI+'">');
      $container.append($img);
      $mediaItem.append($container);
      $img.preloadImg();
      
    }
        
    function _onVideoPosterLoaded() {
      
      var $posterImg = $(this),
          $poster = $posterImg.parent(),
          $playIcon = $poster.find('.video-play-icon');
      
      $playIcon.animate({opacity:1}, 400);      
      
    }
    
    function _addVideoPlayer($detailGroup) {
    
      var $videoContainer = $detailGroup.find('.cs-detail-video-container'),
          $videoPoster = $videoContainer.find('.cs-detail-video-poster'),
          $videoEmbedTarget = $videoContainer.find('.cs-detail-video'),
          videoController = null;
          
      if ($videoEmbedTarget.length === 0) {
        return;
      }
      
      if (MomentumWW.IS_IPAD) {
        
        // go ahead andembed video because it wont autoplay, but need video element attached to DOM
        // in order to be able to "click-to-play"in mobile safari
        $videoEmbedTarget.embedVideo($videoPoster.attr('data-video-uri'), 544, 305);
        videoController = $videoEmbedTarget.videoController().data('videoController');
        videoController.getVideoElement().addEventListener('play', _onVideoPlay, false);
        
      } else {
        
        // wait till clicking the poster to embed and play video on desktop 
        $videoPoster
          .css('cursor', 'pointer')
          .bind('click', _onVideoPosterClick);
      }
      
    }
    
    function _removeVideoPlayer($detailGroup, fadeInPoster) {
      
      var $videoContainer = $detailGroup.find('.cs-detail-video-container'),
          $videoPoster = $videoContainer.find('.cs-detail-video-poster'),
          $videoEmbedTarget = $videoContainer.find('.cs-detail-video'),
          videoController = $videoEmbedTarget.data('videoController');
      
      if (typeof fadeInPoster === 'undefined') { 
          fadeInPoster = true 
      }
      
      if (typeof $videoEmbedTarget.data('has-played') === "undefined") {

        if (MomentumWW.IS_IPAD && typeof videoController !== 'undefined') {
          videoController.getVideoElement().removeEventListener('play', _onVideoPlay);
        } else {
          $videoPoster.unbind('click', _onVideoPosterClick);
        }
        
        $detailGroup.triggerHandler(MomentumWW.events.REMOVE_VIDEO_COMPLETE);
        return;
      }
  
      if ($videoPoster.hasClass('hidden')) {
        $videoPoster.removeClass('hidden');
      }
      
      if (fadeInPoster) {
        
        $videoPoster.stop().animate({opacity:1}, 300, "easeOutQuad", function () {
          $videoEmbedTarget.data('videoController').destroy();
          $videoEmbedTarget.empty();
          $detailGroup.triggerHandler(MomentumWW.events.REMOVE_VIDEO_COMPLETE);
        });
        
      } else {
        
        if (typeof videoController !== 'undefined') {
          videoController.destroy();
        }
        
        $videoEmbedTarget.empty();
        $detailGroup.triggerHandler(MomentumWW.events.REMOVE_VIDEO_COMPLETE);
        
      }
      
    }
    
    function _onVideoPosterClick(e) {
            
      var $videoPoster = $(this),
          $videoEmbedTarget = $videoPoster.prev(),
          videoController = null;
      
      $videoPoster.unbind('click', _onVideoPosterClick);
      
      $videoEmbedTarget.embedVideo($videoPoster.attr('data-video-uri'), 544, 305);
      videoController = $videoEmbedTarget.videoController().data('videoController');
      videoController.play();
      
      $videoEmbedTarget.data('has-played', 'true');
      
      $videoPoster.animate({opacity:0}, 300, "easeOutQuad", function() {
        $videoPoster.addClass('hidden');  
      });
      
    }
    
    function _onVideoPlay(e) {
      
      var $video = $(this),
          $videoEmbedTarget = $video.parent(),
          $videoPoster = $videoEmbedTarget.next(),
          videoController = $videoEmbedTarget.data('videoController');
          
      $videoEmbedTarget.data('has-played', 'true');
      
      //remove event handler
      videoController.getVideoElement().removeEventListener('play', _onVideoPlay);
     
      $videoPoster.animate({opacity:0}, 300, "easeOutQuad", function() {
        $videoPoster.addClass('hidden');
      });

    }
    
    // ----------------------------------------------------------------
    
    function _openCSListView(e) {
      
      var $detailVideo = $('.cs-detail-video video');
      
      if (MomentumWW.IS_IPAD && $detailVideo.length > 0) {
      // hide video on ipad
        $detailVideo.addClass('hidden');
      }
      
      _csListView.transitionIn();
    }
    
    function _closeCSListView(e) {
      // show video on ipad
      var $detailVideo = $('.cs-detail-video video');
      
      if (MomentumWW.IS_IPAD && $detailVideo.length > 0) {
      // hide video on ipad
        $detailVideo.removeClass('hidden');
      }
      
      _csListView.transitionOut();
    }
    
    
    // ----------------------------------------------------------------
    // ----------------------------------------------------------------
    
    _init();
    
    // ----------------------------------------------------------------
    // public methods
    // ----------------------------------------------------------------
    return {
      
      activate: function() {
        if (_isActive) {
          return;
        }
        
        _activate();
      },
      
      deactivate: function() {
        if (!_isActive) {
          return;
        }
        
        _deactivate();
      }
      
    };
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesSection = function() {
    
    var pluginName = "CaseStudiesSection";

    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new CaseStudiesSection(this);
      $this.data(pluginName, pluginInstance);
      $this.data('sectionController', pluginInstance);
    });
    
  };
  
  // ====================================================================


  // ====================================================================
  // @CaseStudiesHeader plugin
  // ====================================================================
  var CaseStudiesProjectNav = function(options, elem) {
    
    var $this = $(elem),
        $body = $('body'),
        $listBtn = $this.find('a.list-btn'),
        $prevBtn = $this.find('a.prev'),
        $nextBtn = $this.find('a.next');
        
    // ----------------------------------------------------------------
    
    function _init() {
            
      
      
    }; // _init()
    
    // ----------------------------------------------------------------
    
    function _activate() {
      $listBtn.bind('click.caseStudiesHeader', _onListBtnClick);

      $prevBtn.bind('click.caseStudiesHeader', _onPrevNextBtnClick);
      $nextBtn.bind('click.caseStudiesHeader', _onPrevNextBtnClick);
    };

    function _deactivate() {
      $listBtn.unbind('click.caseStudiesHeader', _onListBtnClick);

      $prevBtn.unbind('click.caseStudiesHeader', _onPrevNextBtnClick);
      $nextBtn.unbind('click.caseStudiesHeader', _onPrevNextBtnClick);
    };
    
     // ----------------------------------------------------------------  

    function _onListBtnClick(e) {
      e.preventDefault();
      
      $body.trigger(MomentumWW.events.OPEN_CASE_STUDIES_LIST);
    }

    // ----------------------------------------------------------------

    function _onPrevNextBtnClick(e) {
      e.preventDefault();
      var $btn = $(this);
      if (!$btn.hasClass('disabled')) {
        var direction = ($btn.hasClass('prev')) ? -1 : 1;
        $body.trigger(MomentumWW.events.CASE_STUDY_PREV_NEXT, [direction]);
      }
    }

    // ----------------------------------------------------------------

    function _setPreviousEnabled(isEnabled) {
      if (isEnabled) {
        if ($prevBtn.hasClass('disabled'))
          $prevBtn.removeClass('disabled');
      } else if (!$prevBtn.hasClass('disabled')) {
        $prevBtn.addClass('disabled');
      }
    }

    function _setNextEnabled(isEnabled) {
      if (isEnabled)  {
        if ($nextBtn.hasClass('disabled'))
          $nextBtn.removeClass('disabled');
      } else if (!$nextBtn.hasClass('disabled')) {
        $nextBtn.addClass('disabled');
      }
    }
    
    // ----------------------------------------------------------------
    
    _init();
    
    return {
      activate: function() {
        _activate();
      },
      
      deactivate: function() {
        _deactivate();
      },
      
      setPreviousEnabled: function(isEnabled) {
        _setPreviousEnabled(isEnabled);
      },
      
      setNextEnabled: function(isEnabled) {
        _setNextEnabled(isEnabled);
      }
    };
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesProjectNav = function(options) {
    
    var pluginName = "CaseStudiesProjectNav";
    
    options = $.extend({}, $.fn.caseStudiesProjectNav.defaults, options);
    
    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new CaseStudiesProjectNav(options, this);
      $this.data(pluginName, pluginInstance);
      
    });
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesProjectNav.defaults = {
    
  };

  // ====================================================================
  // @CaseStudiesDetailNav plugin
  // - this 
  // ====================================================================
  var CaseStudiesDetailNav = function(options, elem) {
    
    var $this = $(elem),
        $body = $('body'),
        $scrollArea = $this.find('.cs-media-nav-scroll-area'),
        $mediaScrollPrev = $this.find('.cs-media-nav-scroll-btn.prev'),
        $mediaScrollNext = $this.find('.cs-media-nav-scroll-btn.next'),
        $infoLinks = $this.find('.cs-info-detail-link'),
        $thumbGroup = null,
        $mediaThumbs = null,
        _thumbHeight = 0,
        _curMediaScrollOffset = 0,
        _maxMediaScrollOffset = 0,
        _isActive = false;
    
    // ----------------------------------------------------------------
    
    function _init() {
      
      // info links are static so can set them up once here
      $infoLinks.each(function() {
        var $infoLink = $(this);
        
        $infoLink
          .data('type', 'info')
          .attr('data-detail-id', $infoLink.attr('href'));
      });
      
      $infoLinks.preventDefaultClick();
      $mediaScrollPrev.preventDefaultClick();
      $mediaScrollNext.preventDefaultClick();
      
      if (MomentumWW.IS_IPAD) {
        
        $scrollArea.touchSwipe({
          orientation:'vertical',
          swipeUp:_scrollNext,
          swipeDown:_scrollPrev
        });
        
      }
            
    }; // _init()
    
    function _onDetailNavButtonClick(e) {
      
      e.preventDefault();
      
      var $detailNavButton = $(this),
          detailType = $detailNavButton.data('type'),
          detailId = $detailNavButton.data('detail-id');

      if ($detailNavButton.hasClass('selected')) {
       return;
      }
      
      $body.trigger(MomentumWW.events.CASE_STUDY_DETAIL_SELECTED, [detailType, detailId]);
    }
    
    function _onMediaThumbTap(e) {
      
      var $detailNavButton = $(this);
          detailType = $detailNavButton.data('type'),
          detailId = $detailNavButton.data('detail-id');
      
      if ($detailNavButton.hasClass('selected')) {
        return;
      }

      $body.trigger(MomentumWW.events.CASE_STUDY_DETAIL_SELECTED, [detailType, detailId]);
    }
    
    // ----------------------------------------------------------------
    
    function _onMediaThumbOver(e) {
      
      var $thumb = $(this);
      
      if ($thumb.hasClass('selected')) {
        return;
      }
      
      _doMediaThumbRollover($thumb);
      
    }
    
    function _doMediaThumbRollover($mediaThumb) {
      
      var $thumbName = $mediaThumb.find('.media-name'),
          $thumbOverImg = $mediaThumb.find('.cs-media-thumb-over'),
          $mediaLogo = $mediaThumb.find('.media-logo');
          
      $thumbName.stop().animate({bottom:0}, 350, "easeOutExpo");
      $mediaLogo.stop().animate({opacity:0}, 350, "easeOutExpo");
      $thumbOverImg.stop().animate({opacity:0.35}, 350, "easeOutExpo");
    }
    
    function _onMediaThumbOut(e) {
      var $thumb = $(this);
      
      if ($thumb.hasClass('selected')) {
        return;
      }
      
      _doMediaThumbRollout($thumb);
    }
    
    function _doMediaThumbRollout($mediaThumb) {
      
      var $thumbName = $mediaThumb.find('.media-name'),
          $thumbOverImg = $mediaThumb.find('.cs-media-thumb-over'),
          $mediaLogo = $mediaThumb.find('.media-logo');
      
      $thumbName.stop().animate({bottom:-$thumbName.outerHeight()}, 150, "easeOutQuad");
      $mediaLogo.stop().animate({opacity:1}, 350, "easeOutExpo");
      $thumbOverImg.stop().animate({opacity:1}, 350, "easeOutExpo");
    }
    
    function _doMediaThumbSelect($mediaThumb) {
      
      var $thumbName = $mediaThumb.find('.media-name'),
          $thumbOverImg = $mediaThumb.find('.cs-media-thumb-over'),
          $mediaLogo = $mediaThumb.find('.media-logo');
          
      $thumbName.stop().animate({bottom:-$thumbName.outerHeight()}, 150, "easeOutExpo");
      $mediaLogo.stop().animate({opacity:0}, 350, "easeOutExpo");
      $thumbOverImg.stop().animate({opacity:0}, 350, "easeOutExpo");
    }
    
    // ----------------------------------------------------------------
    
    function _activate() {
      
      _isActive = true;
      
      $infoLinks.bind('click', _onDetailNavButtonClick);
      
      // need to update the thumbGroup and the array of mediaThumbs on activation
      $thumbGroup = $this.find('.cs-media-thumb-group');
      $mediaThumbs = $this.find('.cs-media-thumb').each(function() {
        var $mediaThumb = $(this);
        
        $mediaThumb
          .data('type', 'media')
          .data('detail-id', $mediaThumb.data('media-id'));          
      });
      
      _thumbHeight = $mediaThumbs.outerHeight(true);
      _maxMediaScrollOffset = $mediaThumbs.length - 3;
      
      $mediaScrollPrev.bind('click', _onMediaScrollPrevNextClick);
      $mediaScrollNext.bind('click', _onMediaScrollPrevNextClick);
      
      if (MomentumWW.IS_IPAD) {
        $thumbGroup.css({
          '-webkit-transition-property': '-webkit-transform',
          '-webkit-transform': 'translate3d(0px, 0px, 0px)',
          '-webkit-transition-duration': '0ms'
        });
        $mediaThumbs.touchTap();
        $mediaThumbs.bind('touchstart.touchtap', _onMediaThumbOver);
        $mediaThumbs.bind('touchend.touchtap', _onMediaThumbOut);
        $mediaThumbs.bind('tap.touchtap', _onMediaThumbTap);
        
      } else {
        $mediaThumbs
          .bind('click', _onDetailNavButtonClick)
          .bind('mouseover', _onMediaThumbOver)
          .bind('mouseout', _onMediaThumbOut);
      }
            
      _updateMediaThumbScrollNav();
    }
    
    function _deactivate() {
      _isActive = false;
      
      $infoLinks.unbind('click', _onDetailNavButtonClick);
      
      if (MomentumWW.IS_IPAD) {
        $mediaThumbs.unbind('.touchtap');
      } else {
        $mediaThumbs
          .unbind('click', _onDetailNavButtonClick)
          .unbind('mouseover', _onMediaThumbOver)
          .unbind('mouseout', _onMediaThumbOut);
      }
      
      $mediaScrollPrev.unbind('click', _onMediaScrollPrevNextClick);
      $mediaScrollNext.unbind('click', _onMediaScrollPrevNextClick);
      
      _curMediaScrollOffset = 0;
      _maxMediaScrollOffset = 0;
      
      $thumbGroup = null;
      $mediaThumbs = null;
    }
    
    // ----------------------------------------------------------------
    
    function _onMediaScrollPrevNextClick(e) {
      
      e.preventDefault();
      
      var $prevNextBtn = $(this);
      
      if ($prevNextBtn.hasClass('prev')) {
        _scrollPrev();
      } else if ($prevNextBtn.hasClass('next')) {
        _scrollNext();
      }
    }
    
    function _scrollPrev() {
      
      if ($mediaScrollPrev.hasClass('disabled')) {
        return;
      }

      _curMediaScrollOffset -= 1;
      _doScroll();
    }
    
    function _scrollNext() {
      
      if ($mediaScrollNext.hasClass('disabled')) {
        return;
      }
      
      _curMediaScrollOffset += 1;
      _doScroll();
    }
    
    function _doScroll() {
      var destY = -_curMediaScrollOffset * _thumbHeight;
      
      if (MomentumWW.IS_IPAD) {
        $thumbGroup.css({
          '-webkit-transition-duration': '500ms',
          '-webkit-transform': 'translate3d(0px, '+destY+'px, 0px)'
        });
      } else {
        $thumbGroup.stop().animate({top:destY}, 500, "easeOutExpo");
      }
      
      _updateMediaThumbScrollNav();
    }
    
    
    function _updateMediaThumbScrollNav() {
      
      if (_curMediaScrollOffset == 0) {
        $mediaScrollPrev.addClass('disabled');
      } else if ($mediaScrollPrev.hasClass('disabled')) {
        $mediaScrollPrev.removeClass('disabled');
      }
      
      if (_curMediaScrollOffset == _maxMediaScrollOffset) {
        $mediaScrollNext.addClass('disabled');
      } else if ($mediaScrollNext.hasClass('disabled')) {
        $mediaScrollNext.removeClass('disabled');
      }
    }
    
    // ----------------------------------------------------------------
    
    _init();
    
    return {
      
      activate: function() {
        _activate();
      },
      
      deactivate: function() {
        _deactivate();
      },
      
      getIsActive: function() {
        return _isActive;
      },
      
      setSelectedMediaThumb: function(itemId, $targetMediaThumbs) {
        var $targetMediaThumbs = (typeof $targetMediaThumbs === "undefined") ? $mediaThumbs : $targetMediaThumbs,
            $deselectMediaThumb = null,
            $selectMediaThumb = null;
        
        if ($targetMediaThumbs === null) {
          return;
        }
        
        $deselectMediaThumb = $targetMediaThumbs.filter('.selected');
        $selectMediaThumb = $targetMediaThumbs.filter('[data-media-id="'+itemId+'"]');
        
        if ($deselectMediaThumb.length > 0) {
          $deselectMediaThumb.removeClass('selected');
          _doMediaThumbRollout($deselectMediaThumb);
        }
        
        if ($selectMediaThumb.length > 0) {
          $selectMediaThumb.addClass('selected');
          _doMediaThumbSelect($selectMediaThumb);
        }
      },
      
      setSelectedInfoLink: function(itemId) {
        var $selectInfoLink = $infoLinks.filter('[data-detail-id="'+itemId+'"]'),
            $deselectInfoLink = $infoLinks.filter('.selected');
        
        if ($deselectInfoLink.length > 0) {
          $deselectInfoLink.removeClass('selected');
        }

        if ($selectInfoLink.length > 0) {
          $selectInfoLink.addClass('selected');
        }
      }
      
    };
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesDetailNav = function(options) {
    
    var pluginName = "CaseStudiesDetailNav";
    
    options = $.extend({}, $.fn.caseStudiesDetailNav.defaults, options);
    
    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new CaseStudiesDetailNav(options, this);
      $this.data(pluginName, pluginInstance);
      
    });
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesDetailNav.defaults = {
    
  };


  // ====================================================================
  // @CaseStudiesList plugin
  // ====================================================================
  var CaseStudiesList = function(options, elem) {
    
    var $this = $(elem),
        $body = $('body'),
        $caseStudyContent = $("#case-studies"),
        $caseStudiesContainer = $('#case-studies'),
        $closeButton = $this.find('.large-close-button'),
        $list = $this.find('.cs-list-items'),
        $listLinks = $list.find('li a'),
        _curSelectedIndex = null;
        
    // ----------------------------------------------------------------
    
    function _init() {

      var posTop = Number($('section.case-studies .regular-content').css('padding-top').split('px')[0]) 
                 + Number($('section.case-studies .section-title').outerHeight() - 5);
                 
      $this.css("top", posTop+"px");
            
      $this.addClass('hidden');
      
    }; // _init()
    
    // ----------------------------------------------------------------
    
    function _activate() {
      // bind events
      $listLinks.bind('click.caseStudyList', _onListItemClick);
      $closeButton.bind('click.caseStudyList', _onCloseBtnClick);
    }
    
    function _deactivate() {
      // unbind events
      $listLinks.unbind('click.caseStudyList', _onListItemClick);
      $closeButton.unbind('click.caseStudyList', _onCloseBtnClick);
    }
    
    // ----------------------------------------------------------------
        
    function _transitionIn() {
      $this.removeClass('hidden');
      
      $caseStudyContent
          .data('origHeight', $caseStudyContent.css('height'))
          .css("height", $this.css('height'));
      
      if (MomentumWW.IS_IPAD) 
				MomentumWW.contentScroll.refresh();
      
      _transitionInComplete();
    }
    
    function _transitionInComplete() {
      _activate(); 
    }
    
    function _transitionOut() {
      _deactivate();
      $this.addClass('hidden');
      
      $caseStudyContent.css('height', $caseStudyContent.data('origHeight'));
      
      if (MomentumWW.IS_IPAD) 
				MomentumWW.contentScroll.refresh();
    }
    
    // ----------------------------------------------------------------
    
    function _onListItemClick(e) {
      e.preventDefault();
      $body.trigger(MomentumWW.events.CASE_STUDY_SELECTED, [$(this).data('case-study-id')]); // may need to change this to handle specific id's instead of index in the future
      _transitionOut();
    }
    
    function _setSelectedByIndex(index) {
      if (_curSelectedIndex != null) {
        $listLinks.eq(_curSelectedIndex).parent().parent().removeClass('selected');
      }
      
      $listLinks.eq(index).parent().parent().addClass('selected');
      _curSelectedIndex = index;
    }
    
    // ----------------------------------------------------------------
    
    function _onCloseBtnClick(e) {
      e.preventDefault();
      
      //$('#case-study-video').css("visibility","visible"); // bring the video back
      
      $body.trigger(MomentumWW.events.CLOSE_CASE_STUDIES_LIST);
    }
    
    // ----------------------------------------------------------------
    
    _init();
    
    return {
      transitionIn: function() {
        _transitionIn();
      },
      
      transitionOut: function() {
        _transitionOut();
      },
      
      setSelectedByIndex: function(index) {
        _setSelectedByIndex(index);
      } 
    };
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesList = function(options) {
    
    var pluginName = "CaseStudiesList";
    
    options = $.extend({}, $.fn.caseStudiesList.defaults, options);
    
    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new CaseStudiesList(options, this);
      $this.data(pluginName, pluginInstance);
      
    });
    
  };
  
  // ==================================================================
  
  $.fn.caseStudiesList.defaults = {
    
  };
  
  // ====================================================================
  
  // ====================================================================
  // @CaseStudyDetailScroll plugin
  // ====================================================================
  var CaseStudyDetailScroll = function(options, elem) {
    
    var $this = $(elem),
        $scrollContent = null,
        $scrollContentContainer = null,
        _scrollContentH = 0,
        _pSroll = null;
    
    
    // ----------------------------------------------------------------
    
    function _init() {
      var scrollContentHtml = '<div class="scroll-content"></div>';
      $scrollContent = $.browser.msie ? $(innerShiv(scrollContentHtml, false)) : $(scrollContentHtml);
      
      var scrollContentContainerHtml = '<div class="scroll-content-container"></div>';
      $scrollContentContainer = $.browser.msie ? $(innerShiv(scrollContentContainerHtml, false)) : $(scrollContentContainerHtml);
      
      var scrollBarAreaHtml = '<div class="scroll-bar-area"><div class="scroll-bar-container"><div class="scroll-bar"></div></div></div>';
      $scrollBarArea = $.browser.msie ? $(innerShiv(scrollBarAreaHtml, false)) : $(scrollBarAreaHtml);
      
      $this.wrapInner($scrollContent);
      $this.wrapInner($scrollContentContainer);
      $this.append($scrollBarArea);
      
      $scrollContent = $this.find('.scroll-content');
      $scrollContentContainer = $this.find('.scroll-content-container');
      _scrollContentH = $scrollContent.outerHeight() - $scrollContentContainer.outerHeight();
          
      if (_scrollContentH > 0) { // only make slider if there the content is tall enough to be scrolled
        
        if (MomentumWW.IS_IPAD) {
          // setup touch scrolling plugin
          $scrollContentContainer.touchSlider({content:$scrollContent});
          $this.find('.scroll-bar-container').addClass('hidden');
        } else {
          // use regular slider scroll ui
          $this.find('.scroll-bar').slider({
            orientation: "vertical",
            value: 100,
            slide: _onSlide
          });
        };
      } else {
        $this.find('.scroll-bar-container').addClass('hidden');
      }
    }; // _init()
     
    // ----------------------------------------------------------------
    function _onSlide( event, ui ) {
      
      var scrollPct = ui.value * 0.01;
      var destTop = scrollPct * _scrollContentH - _scrollContentH;
      //debug.log("CaseStudyDetailScroll : _onSlide :: destTop: "+destTop );
      $scrollContent.css("top", destTop+"px");
      
    };
    
    _init();
    
    return {
      
    };
    
  };
  
  // ==================================================================
  
  $.fn.caseStudyDetailScroll = function(options) {
    
    var pluginName = "CaseStudyDetailScroll";
    
    options = $.extend({}, $.fn.caseStudyDetailScroll.defaults, options);
    
    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new CaseStudyDetailScroll(options, this);
      $this.data(pluginName, pluginInstance);
      
    });
    
  };
  
  // ==================================================================
  
  $.fn.caseStudyDetailScroll.defaults = {
    
  };
  
})(jQuery);