var lock = false;
var itemBgOn = {width:172, height:172, opacity:1, left:-4, bottom:-4};
var itemBg1 = {width:138, height:138, opacity:.8, left:-3, bottom:-3};
var itemBg2 = {width:104, height:104, opacity:.5, left:-2, bottom:-2};
var itemBgDeck = {width:70, height:70, opacity:0, left:-1, bottom:-1};
var itemGroupOn = {width:164, height:164, opacity:1};
var itemGroup1 = {width:132, height:132, opacity:.8};
var itemGroup2 = {width:100, height:100, opacity:.5};
var itemGroupDeck = {width:68, height:68, opacity:0};
var itemPos_Deck = {left:-81};
var itemPos_2 = {left:29};
var itemPos_1 = {left:167};
var itemPos00 = {left:337};
var itemPos01 = {left:541};
var itemPos02 = {left:712};
var itemPosDeck = {left:822};
$(document).ready(initCategories);

function initCategories() {
  $('.item').css('display','block');
  $('.item .bg').css(itemBgDeck);
  $('.item .group').css(itemGroupDeck);
  $('.item02 .bg').css(itemBg2);
  $('.item01 .bg').css(itemBg1);
  $('.item00 .bg').css(itemBgOn);
  $('.item-1 .bg').css(itemBg1);
  $('.item-2 .bg').css(itemBg2);
  $('.item02 .group').css(itemGroup2);
  $('.item01 .group').css(itemGroup1);
  $('.item00 .group').css(itemGroupOn);
  $('.item-1 .group').css(itemGroup1);
  $('.item-2 .group').css(itemGroup2);
  $('.item').hover(bgOver, bgOut);
  $('.carousel .left_btn').click(goLeft);
  $('.carousel .right_btn').click(goRight);
}

function goRight() {
  if (lock) return;
  lock = true;
  var $display = $(this).siblings('.display');
  var time = 500;
 
  if($display.children('.item02').next().attr('class') == 'item')
    $display.children('.item02').next().addClass('itemdeck');
  else $display.children('.item:first').addClass('itemdeck');

  $display.find('.itemdeck').css(itemPosDeck);
  $display.find('.itemdeck .bg').animate(itemBg2, {duration:time});
  $display.find('.item02 .bg').animate(itemBg1, {duration:time});
  $display.find('.item01 .bg').animate(itemBgOn, {duration:time});
  $display.find('.item00 .bg').animate(itemBg1, {duration:time});
  $display.find('.item-1 .bg').animate(itemBg2, {duration:time});
  $display.find('.item-2 .bg').animate(itemBgDeck, {duration:time});
  $display.find('.itemdeck .group').animate(itemGroup2, {duration:time});
  $display.find('.item02 .group').animate(itemGroup1, {duration:time});
  $display.find('.item01 .group').animate(itemGroupOn, {duration:time});
  $display.find('.item00 .group').animate(itemGroup1, {duration:time});
  $display.find('.item-1 .group').animate(itemGroup2, {duration:time});
  $display.find('.item-2 .group').animate(itemGroupDeck, {duration:time});
  $display.find('.itemdeck').animate(itemPos02, {duration:time, complete:function() {$(this).removeClass('itemdeck').addClass('item02')} });
  $display.find('.item02').animate(itemPos01, {duration:time, complete:function() {$(this).removeClass('item02').addClass('item01')} });
  $display.find('.item01').animate(itemPos00, {duration:time, complete:function() {$(this).removeClass('item01').addClass('item00')} });
  $display.find('.item00').animate(itemPos_1, {duration:time, complete:function() {$(this).removeClass('item00').addClass('item-1')} });
  $display.find('.item-1').animate(itemPos_2, {duration:time, complete:function() {$(this).removeClass('item-1').addClass('item-2')} });
  $display.find('.item-2').animate(itemPos_Deck, {duration:time, complete:rightComplete});
  
  function rightComplete() {
    $(this).removeClass('item-2');
	lock = false;
  }
}

function goLeft() {
  if (lock) return;
  lock = true;
  var $display = $(this).siblings('.display');

  var time = 500;
  if($display.length == 0) { lock=false; return; }
  if($display.children('.item-2').prev().attr('class') == 'item')
    $display.children('.item-2').prev().addClass('item-deck');
  else $display.children('.item:last').addClass('item-deck');

  $display.find('.item-deck').css(itemPos_Deck);
  $display.find('.item-deck .bg').animate(itemBg2, {duration:time});
  $display.find('.item-2 .bg').animate(itemBg1, {duration:time});
  $display.find('.item-1 .bg').animate(itemBgOn, {duration:time});
  $display.find('.item00 .bg').animate(itemBg1, {duration:time});
  $display.find('.item01 .bg').animate(itemBg2, {duration:time});
  $display.find('.item02 .bg').animate(itemBgDeck, {duration:time});
  $display.find('.item-deck .group').animate(itemGroup2, {duration:time});
  $display.find('.item-2 .group').animate(itemGroup1, {duration:time});
  $display.find('.item-1 .group').animate(itemGroupOn, {duration:time});
  $display.find('.item00 .group').animate(itemGroup1, {duration:time});
  $display.find('.item01 .group').animate(itemGroup2, {duration:time});
  $display.find('.item02 .group').animate(itemGroupDeck, {duration:time});
  $display.find('.item-deck').animate(itemPos_2, {duration:time, complete:function(){$(this).removeClass('item-deck').addClass('item-2')} });
  $display.find('.item-2').animate(itemPos_1, {duration:time, complete:function() {$(this).removeClass('item-2').addClass('item-1')} });
  $display.find('.item-1').animate(itemPos00, {duration:time, complete:function() {$(this).removeClass('item-1').addClass('item00')} });
  $display.find('.item00').animate(itemPos01, {duration:time, complete:function() {$(this).removeClass('item00').addClass('item01')} });
  $display.find('.item01').animate(itemPos02, {duration:time, complete:function() {$(this).removeClass('item01').addClass('item02')} });
  $display.find('.item02').animate(itemPosDeck, {duration:time, complete:leftComplete});

  function leftComplete() {
    $(this).removeClass('item02');
    lock = false;
  }
}

function bgOver() {$(this).find('.bg').attr('src','http://www.impactmenusystems.com/images/uploads/template/product_group_bg_on.jpg');
}

function bgOut() {$(this).find('.bg').attr('src','http://www.impactmenusystems.com/images/uploads/template/product_group_bg.jpg');
}