var isShowcase = false;
var activeItem = -1;

$j(document).ready(function() {
  var index = -1;
  var showcaseContainer = $j(".showcase");
  var background = $j(".selection_bg");
  var headline = $j(".headline");
  var showcaseItem;
  var screenshotItem;
  var minimizeItem = $j(".minimize");

  function hideShowcase() {
    showcaseItem.fadeOut(100, function() {
      background.animate({
        top: '408',
        height: '129'
      },
      600,
      'linear',
      function() {
        showcaseContainer.css({ "z-index": 0});
      });
      headline.animate({
        color: '#58595B'
      });
      $j(".screenshot .shade").fadeOut(400);
      $j(".minimize").fadeOut(400);
    });

    isShowcase = false;
  }

  $j("#contact_us").submit(function() {
    $j(".loading").show();
    $j.post("/intro/contact",
      $j("#contact_us").serialize(),
      function(response) {
        $j(".loading").hide();
        $j(".thank_you").show().delay(3000).fadeOut(1000);
      },
      "json"
    );
    return false;
  });

  $j(".selection li, .contact_us").click(function() {
    // SHOULD USE CSS VALUES

    index = $j(this).attr("data-index") || -1;
    showcaseItem = $j($j(".showcase_item")[index]);
    screenshotItem = $j($j(".screenshot")[index]);
    
    // if showcase is not displayed
    if(!isShowcase) {
      showcaseContainer.css({ "z-index": -2});
      headline.animate({
        color: '#A8C844'
      });
      background.animate({
          top: '0',
          height: '537'
        },
        600,
        'linear',
        function() {
          showcaseItem.fadeIn(400);
          minimizeItem.fadeIn(400);
        }
      );
      
      isShowcase = true;
    }
    else {

      // if selecting the same item, hide it
      if(activeItem == index) {
        hideShowcase();
        return false;
      }
      // switch to another showcase item
      else {
        $j(".showcase_item:visible").fadeOut(300, function() {
          showcaseItem.fadeIn(500, function() {
            $j(this).removeAttr("filter");
          });
        })
      }
    }

    activeItem = index;

    //
    $j(".screenshot .shade").each(function(i, item) {
      var $item = $j(item);
      // if screenshot is selected, then focus
      if(i == index) {
        $item.hide();
      }
      else {
        $item.show();
      }
    });

    return false;
  });

  $j(".minimize").click(function() {
    hideShowcase();
  });

});