/*  DUK Lib js
 
 Author:   Mat J (matt@designuk.com)
  Job No:   duk077
  File:   lib.css
  Description: Basic js lib DUK site
 Dependencies: jQuery-1.2.6.min.js
     jquery.dimensions.min.js -- jQuery plugin
amended: Martin Shaw
  ----------------------------------------------------------------- */
 
$(document).ready(function() { 
 // this setting allows px to em conversion (it's the base body font-size)
 var globalFontSize = 12;
 // set up a scroll container - set container div height and add "+ -" buttons
 var setScrollContainer = function($el, num) {
  // TEST FIRST: if there are more <li> elements than "num" then continue, otherwise there is no effect
  if ($el.find('li').length > num) {
   // get the "overflow" div
   var $overflowEl = $el.children('div.overflow');
   // now get the height of 'visLength' scroller items (these are always LI elements):
   var elHeight = $el.find('li').outerHeight({ margin : true });
   // set the overflow div height to "num" * elHeight - ie "3 times 176"
   var overFlowHeight = elHeight * num;
   // set the overflow div height to overFlowHeight converted to EMS, and set overflow to hidden.
   $overflowEl.css({
    //height : overFlowHeight.pxToEm({ scope : convertScope }),
    height : (overFlowHeight / globalFontSize) + 'em',
    position : 'relative',
    top : '0',
    left : '0',
    overflow : 'hidden'
   }).data('storage', {
    count : 0, // store a current item count in div.overflow
    visLength : num // store the visible length too
   });
   // now set appropriate css for the child UL or OL:
   $overflowEl.children('ul, ol').css({
    position : 'absolute',
    top : '0',
    left : '0'
   });
   // insert "+" and "-" buttons:
   var navEl = $('<ul class="scroll_btns"><li class="plus_btn" title="Scroll up">Next</li><li class="minus_btn" title="Scroll down">Previous</li></ul>');
   $el.prepend(navEl);
   // add rollover behaviours to these buttons
   $el.find('ul.scroll_btns li').hover(function() {
    $(this).css({ backgroundPosition : 'bottom left' });
   }, function() {
    $(this).css({ backgroundPosition : 'top left' });
   });
   // add click behaviours to these buttons
   $el.find('ul.scroll_btns li.plus_btn').click(function() {
    doScroll('inc', $(this));
   });
   $el.find('ul.scroll_btns li.minus_btn').click(function() {
    doScroll('dec', $(this));
   });
  }
 }
 
 // function for scrolling buttons, pass in direction, and the specific div.overflow to act upon
 var doScroll = function(dir, $buttonEl) {
  // get to the div.overflow based on the caller button:
  var $overflowEl = $buttonEl.parent().parent().children('div.overflow')
  // extract the overflow div's current index and either increase or decrease it:
  var cur = $overflowEl.data('storage').count;
  // the limit is the number of <li> items present minus the visible length:
  var limit = ($overflowEl.find('li').length) - $overflowEl.data('storage').visLength;
  if ((dir == 'inc') && (cur < limit)) {
   $overflowEl.data('storage').count++;
  } else if ((dir == 'dec') && (cur > 0)) {
   $overflowEl.data('storage').count--;
  }
  animateScroll($overflowEl);
 }
 
 // just the animation here - get the amount needed to scroll: get the <li> offset relative to div.overflow, then animate from there
 var animateScroll = function($overflowEl) {
  // get the POSITION of the <li> with an index of "count" relative to the container
  var index = $overflowEl.data('storage').count
  var $item = $overflowEl.find('li').eq(index);
  var amount = $item.position().top;
  // get the current "top" value of the containing <ul> or <ol> (this is what moves)
  var $mover = $overflowEl.find('ul, ol');
  var targVal = 0 - amount;
  $mover.animate({ 'top' : targVal }, 400, 'easeOutQuad', function() {
   // test count, then grey out (or bring back in) appropriate buttons
  });
 }
 
 // to start off the scroll setup, first test that there are more elements than the default window (also acts as an existence test)
 //setScrollContainer($('.event_listing'), 4);
 setScrollContainer($('.puff_links'), 2);
 //setScrollContainer($('.article_listing'), 4);
 //setScrollContainer($('.news_listing'), 3); 
});