/*++ flip-counter.js - jquery javascript to implement tabbed flip-counter
 *
 * Author: Stuart Malcolm
 * Email: stuart@ifoundry.co.uk
 * Date: 26th April 2011
 *
 */

/*SET THE TARGET VALUES FOR EACH TAB IN THE COUNTER */

var value = {            /* <<< Change these values to update the counter <<< */
  "completed"   : 282, /* now tab called 'transactions worked on' */
  "notcompleted": 0,  
  "transactions": 0
}

/* Q: HOW DO I ENABLE OR DISABLE TABS? */
/* A: the tabs are defined as <a> tags in the html file (index.html) */
/*    and look for <div id="flip-counter"> div which contains them.  */
/*    Note that the numbers are inserted into the flip-counter div   *
/*    by the javascript code (see below). */

var DIGIT_PATH = 'template/images/counter/digits/';

var UPATH = DIGIT_PATH+'up/';
var DPATH = DIGIT_PATH+'down/';

var current = { /* used to store the digits currently being displayed */
  "d5" : -1,
  "d4" : -1,
  "d3" : -1,
  "d2" : -1,
  "d1" : -1
}

var target = { /* used to store the target digits for counter value. This is the value the anim will stop at. */
  "d5" : -1,
  "d4" : -1,
  "d3" : -1,
  "d2" : -1,
  "d1" : -1,  
  "value" : -1  
}

var counter = 0; /* used to store the value that the counter should display */

/*  
 *  resetCounter - reset the digits to Blank
 */
function resetCounter() {
  $('#flip-counter .upperPart img.digit').attr('src', UPATH+'blank.png');
  $('#flip-counter .lowerPart img.digit').attr('src', DPATH+'blank.png');
}

/*  
 *  setCounter - set the target digits for a given target value
 */
function setCounter(value) {
  var v = value;
  target.value = v;
  target.d5 = Math.floor(v / 10000);
  v = v % 10000;
  target.d4 = Math.floor(v / 1000);
  v = v % 1000;
  target.d3 = Math.floor(v / 100);
  v = v % 100;
  target.d2 = Math.floor(v / 10);
  v = v % 10;
  target.d1 = v;
}

/*
 * flip - activate the animation for the 'flip'
 */
function flip(upperId, lowerId, changeNumber, pathUpper, pathLower){
        var upperBackId = upperId+"Back";
        $(upperId)
            .attr('src', $(upperBackId).attr('src'))
            .height("22px")
            .css({"visibility": "visible", 'display': 'inline-block' });
        
        $(upperBackId).attr('src', pathUpper + parseInt(changeNumber) + ".png");
        
        $(lowerId)
            .attr('src', pathLower + parseInt(changeNumber) + ".png")
            .height('0px')
            .css({"visibility": "visible", 'display': 'inline-block'});
        
        $(upperId).animate({'height': 0}, { 'duration': 100, defaultEasing: 'easeinoutsine', 'complete': function(){
            $(lowerId).animate({'height': 22}, { 'duration': 100, defaultEasing: 'easeinoutsine', 'complete': function(){
                $(lowerId + "Back").attr('src', $(lowerId).attr('src') );
                $(lowerId).add(upperId).css({"visibility": "hidden",
                                             "display": 'inline-block' }).height('0');
            } } )
        } })
}

/*
 * tick - update the values of the current digits towards the target and kick-off the animation
 */
function tick() {
  if (current.d5 > target.d5) { current.d5--; flip('#ud5','#ld5',current.d5, UPATH, DPATH ); }
  if (current.d5 < target.d5) { current.d5++; flip('#ud5','#ld5',current.d5, UPATH, DPATH ); }
  if (current.d4 > target.d4) { current.d4--; flip('#ud4','#ld4',current.d4, UPATH, DPATH ); }
  if (current.d4 < target.d4) { current.d4++; flip('#ud4','#ld4',current.d4, UPATH, DPATH ); }
  if (current.d3 > target.d3) { current.d3--; flip('#ud3','#ld3',current.d3, UPATH, DPATH ); }
  if (current.d3 < target.d3) { current.d3++; flip('#ud3','#ld3',current.d3, UPATH, DPATH ); }
  if (current.d2 > target.d2) { current.d2--; flip('#ud2','#ld2',current.d2, UPATH, DPATH ); }
  if (current.d2 < target.d2) { current.d2++; flip('#ud2','#ld2',current.d2, UPATH, DPATH ); }
  if (current.d1 > target.d1) { current.d1--; flip('#ud1','#ld1',current.d1, UPATH, DPATH ); }
  if (current.d1 < target.d1) { current.d1++; flip('#ud1','#ld1',current.d1, UPATH, DPATH ); }
}


/* initiate the counter when the window loads */
$(function() {
  var numbers =   '<div class="back">'+
                    '<div class="upperPart" id="upperPartBack">'+
                      '<img src="'+DIGIT_PATH+'spacer.gif" />'+
                      '<img class="digit d5" id="ud5Back" />'+
                      '<img class="digit d4" id="ud4Back" />'+
                      '<img class="digit d3" id="ud3Back" />'+
                      '<img class="digit d2" id="ud2Back" />'+
                      '<img class="digit d1" id="ud1Back" />'+
                    '</div>'+
  					     '<div class="lowerPart" id="lowerPartBack">'+
                      '<img src="'+DIGIT_PATH+'spacer.gif" />'+
                      '<img class="digit d5" id="ld5Back" />'+
                      '<img class="digit d4" id="ld4Back" />'+
                      '<img class="digit d3" id="ld3Back" />'+
                      '<img class="digit d2" id="ld2Back" />'+
                      '<img class="digit d1" id="ld1Back" />'+
                    '</div>'+
  					   '</div>'+
                  '<div class="front">'+
                    '<div class="upperPart" id="upperPart">'+
                      '<img src="'+DIGIT_PATH+'spacer.gif" />'+
                      '<img class="digit d5" id="ud5" />'+
                      '<img class="digit d4" id="ud4" />'+
                      '<img class="digit d3" id="ud3" />'+
                      '<img class="digit d2" id="ud2" />'+
                      '<img class="digit d1" id="ud1" />'+
                    '</div>'+
  					     '<div class="lowerPart" id="lowerPart">'+
                      '<img src="'+DIGIT_PATH+'spacer.gif" />'+
                      '<img class="digit d5" id="ld5" />'+
                      '<img class="digit d4" id="ld4" />'+
                      '<img class="digit d3" id="ld3" />'+
                      '<img class="digit d2" id="ld2" />'+
                      '<img class="digit d1" id="ld1" />'+
                    '</div>'+
  					   '</div>';

  //Insert the flip-counter html into the widget number container
  $('#flip-counter .numbers').html(numbers);  
  resetCounter();
  //now, hook-up CLICK event handlers to the flip-counter TABS
  $('#flip-counter a').click(function(e){
      var hreftag = $(this).attr('href');
      var bgpos = '0 0';
      switch (hreftag)
      {
          case '#completed':
            bgpos = '0 0'; 
            setCounter(value.completed);
            break;
          case '#not-completed':    
            bgpos = '-200px 0'; 
            setCounter(value.notcompleted);
            break;
          case '#transactions':     
            bgpos = '-400px 0'; 
            setCounter(value.transactions);
            break;
      }//switch
      //now, set the background image position
      $('#flip-counter').css('background-position',bgpos);
  });//flip-counter a  

  setCounter(value.completed);
  /* Kick off the clock tick every second */
  setInterval('tick()', 410);
});