BlockFlipper = new Map();

BlockFlipper.pagesize = 4;
BlockFlipper.prevlink;
BlockFlipper.nextlink;
BlockFlipper.pages = [];
BlockFlipper.currentpage = 0;

BlockFlipper.setup = function () {
   BlockFlipper.blocks = $('.blockflipper > div');
   BlockFlipper.blockWidth = BlockFlipper.blocks.width() + parseInt(BlockFlipper.blocks.css('margin-right'));
   BlockFlipper.canvasWidth = $('.blockflipper').width();

   BlockFlipper.prevlink = $('.bf_prev');
   BlockFlipper.nextlink = $('.bf_next');


   // Distribute blocks
   BlockFlipper.blocks.each(function (i) {
      $(this).css({left: i * BlockFlipper.blockWidth });
   });

   //Set up pager
   var pageCount = Math.ceil(BlockFlipper.blocks.length / BlockFlipper.pagesize);

   //create page elements
   var _html = '';
   for (var i=0; i < pageCount; i++) {
      _html += '<a href="" class="bf_page" index="'+ i +'"><img src="'+ Globals.webRoot +'gfx/blockflipper/page.png" alt="" /></a>';
   }
   BlockFlipper.prevlink.after(_html);
   BlockFlipper.pages = $('.bf_page');

   //set click events
   BlockFlipper.prevlink.click(BlockFlipper.flipPrevious);
   BlockFlipper.nextlink.click(BlockFlipper.flipNext);
   BlockFlipper.pages.click(function (ev) {
      return BlockFlipper.flipToPage(this);
   });

   ////////////

   //initialise starting state.
   BlockFlipper.flipToPage( BlockFlipper.pages.eq(0) );
}

BlockFlipper.flipPrevious = function () {
   var _targetindex = Math.max(0, BlockFlipper.currentpage - 1);

   BlockFlipper.flipToPage( BlockFlipper.pages.eq(_targetindex) );
   return false;
}
BlockFlipper.flipNext = function () {
   var _targetindex = Math.min(BlockFlipper.pages.length-1, BlockFlipper.currentpage + 1);

   BlockFlipper.flipToPage( BlockFlipper.pages.eq(_targetindex) );
   return false;
}
BlockFlipper.flipToPage = function (pageEl) {
   var _index = parseInt($(pageEl).attr('index'));
   var _targetdiff = (BlockFlipper.currentpage - _index);

   BlockFlipper.blocks.each(function (i) {
      _blockleft = parseInt($(this).css('left'));
      $(this).animate({ left: _blockleft + (BlockFlipper.canvasWidth * _targetdiff) }, 700);
   });

   BlockFlipper.pages.eq(BlockFlipper.currentpage).removeClass('current');
   BlockFlipper.currentpage = _index;
   BlockFlipper.pages.eq(BlockFlipper.currentpage).addClass('current');

   return false;
}


/////////////////////////////////////

// Slideshow thing. Ported code from the header fader from Netjes. Contains cruft because it's not really a header here.
var Header = new Map();

///settings
Header.fadeTime = 1000;
Header.fadeQuickTime = 500; //manually activated fade must move a lot quicker.
Header.pauseTime = 5500;
Header.items = new Array();
Header.fadeTarget = null;
Header.timer = null;
Header.counter = 0;

///functionality
Header.index = 1;
Header.selectorindex = 0;

Header.setup = function () {
   var jHeaders = $('.hf_item');
   Header.selectors = $('.photoselect a');

   // set up jObjects
   Header.fadeTarget = jHeaders.eq(1);
   Header.srcTarget1 = jHeaders.eq(0);
   Header.srcTarget2 = jHeaders.eq(1);

   Header.selectors.each(function (i) {
      $(this).hover(function () {
         Header.activate(i);
         this.blur();
      });
   })

   //enter fade loop.
   setTimeout(Header.fadeOut, Header.pauseTime);
   Header.selectors.eq(Header.selectorindex).parent().toggleClass('active');
}

Header.getNextIndex = function () {
   //console.log('getNextIndex()');
   //console.log('old', Header.index);
   Header.index = ++Header.index % this.items.length;
   //console.log('new', Header.index);
   Header.selectorindex = ++Header.selectorindex % this.items.length;
   Header.counter++;

   return Header.index;
}

Header.fadeIn = function () {
   //console.log('fadeIn()');
   Header.selectors.eq(Header.selectorindex).parent().removeClass('active');
   var _index = Header.getNextIndex();
   Header.selectors.eq(Header.selectorindex).parent().addClass('active');

   Header.fadeTarget.fadeIn(Header.fadeTime, function () {
      Header.setContent(Header.srcTarget1);
      Header.timer = setTimeout(Header.fadeOut, Header.pauseTime);
   });
}
Header.fadeOut = function () {
   //console.log('fadeOut()');
   Header.selectors.eq(Header.selectorindex).parent().removeClass('active');
   var _index = Header.getNextIndex();
   Header.selectors.eq(Header.selectorindex).parent().addClass('active');

   Header.fadeTarget.fadeOut(Header.fadeTime, function () {
      Header.setContent(Header.srcTarget2);

      Header.timer = setTimeout(Header.fadeIn, Header.pauseTime);
   });
}
Header.activate = function (intIndex) {
   //console.log('activate()');
   clearTimeout(Header.timer);

   //console.log('activate to', intIndex);
   //console.log('current index', Header.index);
   //console.log('current index sel', Header.selectorindex);


   //console.log('kill active on sel ', Header.selectorindex);
   Header.selectors.eq(Header.selectorindex).parent().removeClass('active');
   Header.index = intIndex;
   Header.selectorindex = intIndex;

   //select whether the top or bottom image is currently show and which to fade.
   if (Header.counter % 2 == 1) {
      //bottom is visble. set top src; fade in the top one
      Header.setContent(Header.srcTarget2);
      Header.srcTarget2.fadeIn(Header.fadeQuickTime);
   }
   else {
      //top is visble. set bottom src and fadeout top.
      Header.setContent(Header.srcTarget1);
      Header.srcTarget2.fadeOut(Header.fadeQuickTime);
   }

   //activate matching selector button
   //console.log('add active on sel ', Header.selectorindex);
   Header.selectors.eq(intIndex).parent().addClass('active');

   Header.counter++;
}

Header.setContent = function (jItem) {
	var dataItem = Header.items[Header.index];
	var jInfoBox = $('.hf_infobox', jItem);

	if (!dataItem.display) {
		jInfoBox.hide();
	}
	else {
		jInfoBox.show();
	}

   $('.hf_image', jItem).attr('src', dataItem.image );
   $('.hf_infotitle', jItem).html(dataItem.child);
   $('.hf_infotext', jItem).html(dataItem.quote);
   $('.hf_infoslogan', jItem).html(dataItem.slogan);
}

/////////////////////////////////////

$(document).ready(Header.setup);
$(document).ready(BlockFlipper.setup);