/// <reference path='jquery-1.4.1-vsdoc.js'/>

$(window).load(function () {
  GridInit();
  AnimateIcons();
});

function AnimateIcons() {
  $('#CircleStrategy').data('StartRadian', 208).data('LinkID', 'StrategyLink');
  $('#CircleAnalytics').data('StartRadian', 280).data('LinkID', 'AnalyticsLink');
  $('#CircleSystems').data('StartRadian', 352).data('LinkID', 'SystemsLink');
  $('#CircleInteractive').data('StartRadian', 424).data('LinkID', 'InteractiveLink');
  $('#CircleCreative').data('StartRadian', 496).data('LinkID', 'CreativeLink');

  $('#ServicesContainer').children('.circle').each(function (i) {
    $(this).mouseover(function () { $('#' + $(this).data('LinkID')).addClass('On'); });
    $(this).mouseout(function () { $('#' + $(this).data('LinkID')).removeClass('On'); });
    var startRadian = $(this).data('StartRadian');
    $(this).animate({ path: new $.path.circle_arc({ radius: 35, start: startRadian, dir: -1 }) }, 1500, function () {
      $(this).animate({ path: new $.path.circle_arc({ radius: 35, start: startRadian, dir: 1 }) }, 1500);
    });
  });
}

var Positions = [[0, 0], [0, 118], [0, 236], [0, 472], [0, 590],
                 [65, 0], [130, 0], [0, 354], [65, 590], [130, 590],
                 [260, 0], [195, 0], [325, 236], [195, 590], [260, 590],
                 [325, 0], [325, 118], [325, 354], [325, 472], [325, 590]];
var CloseBtn = $('<a href="#" id="GridCloseBtn"></a>');
var LeaveBehinds;
var BoxSpeed = 400;
var currentOpen;
var isClosed = true;
//$('#test').append(+'<br />');
function GridInit() {
  currentOpen = '';
  isClosed = true;
  LeaveBehinds = [$('#LeaveBehind1'), $('#LeaveBehind2')];
  $('div.GridSquareColorBox').each(function (index) {
    var t = $(this);
    t.data('top', t.css('top')).data('left', t.css('left')).data('type', 'GridSquareColorBox'); ;
  });
  $('div.GridSquareImg').each(function (index) {
    var t = $(this);
    t.click(function () { GridSquareClick(t.attr("id")); });
    t.addClass('GridSquareActive').data('top', t.css('top')).data('left', t.css('left')).data('type', 'GridSquareImg');
    var img = t.children(':first').children('img.imgcontent');
    img.data('marginTop', img.css('marginTop')).data('marginLeft', img.css('marginLeft')).data('width', img.css('width')).data('height', img.css('height'));
  });
  $('div.GridSquareImgCopy').each(function (index) {
    var t = $(this);
    t.click(function () { GridSquareClick(t.attr("id")); });
    t.addClass('GridSquareActive').data('top', t.css('top')).data('left', t.css('left')).data('type', 'GridSquareImgCopy');
    var child = t.children(':first');
    child.data('marginTop', child.css('marginTop')).data('marginLeft', child.css('marginLeft'));
    var img = child.children('img:first');
    var imgWidth = img.width(), imgHeight = img.height();
    if (imgHeight != 249) {
      img.data('small_width', imgWidth).data('small_height', imgHeight);
      imgWidth = imgWidth * 249 / imgHeight;
      img.data('large_width', imgWidth).data('large_height', 249);
    }
    if (imgWidth < 225) img.data('large_left', ((225 - imgWidth) / 2) + 'px');
    var copy = child.children('.copy');
    if (imgWidth > 236) copy.css({ width: (461 - imgWidth - 10) + 'px', left: (imgWidth + 10) + 'px' });
    copy.show();
    copy.css({ top: (((249 - copy.height()) / 2) - 10) + 'px' });
  });
  CloseBtn.hide();
  CloseBtn.click(function (e) { e.preventDefault(); Close(); });
  $('#Grid').append(CloseBtn);
  //GridSquareClick('_ctl0_BodyContent_HomeGrid33');
}

function GridSquareClick(id) {
  if (currentOpen == id) return;
  CloseBtn.hide();
  var current = $(this);
  currentOpen = id;
  var LeaveBehind = LeaveBehinds.shift();
  var type, el;
  $('div.GridSquare').each(function (index) {
    el = $(this);
    type = el.data('type');
    if (el.attr('id') != id) {
      if (type != 'GridSquareColorBox') el.addClass('GridSquareActive');
      el.animate({ width: '107px', height: '54px', top: Positions[index][0] + 'px', left: Positions[index][1] + 'px' }, BoxSpeed);
      ShrinkIcon(el, type);
    }
    else {
      LeaveBehind.show().css({ top: el.css('top'), left: el.css('left') });
      if (isClosed) LeaveBehind.animate({ top: Positions[index][0] + 'px', left: Positions[index][1] + 'px' }, BoxSpeed);
      else LeaveBehind.css({ top: Positions[index][0] + 'px', left: Positions[index][1] + 'px' });
      ExpandIcon(el, type);
    }
  });
  LeaveBehinds.push(LeaveBehind);
  if (isClosed) {
    $('#BottomCopy').animate({ width: '688px', left: '-5px', top: '384px' }, BoxSpeed);
    isClosed = false;
  }
}
function ExpandIcon(el, type) {
  var img, child, copy;
  el.removeClass('GridSquareActive').css('z-index', 100).animate({ width: '461px', height: '249px', top: '65px', left: '118px', marginTop: '0', marginLeft: '0' }, BoxSpeed, function () { el.css('z-index', 1); });
  if (type == 'GridSquareImg') {
    child = el.children(':first');
    img = child.children('.imgcontent');
    copy = child.children('.copy');
    img.animate({ width: '461px', height: '249px', marginTop: '0', marginLeft: '0' }, BoxSpeed, function () { CloseBtn.show(); });
    copy.fadeIn(BoxSpeed);
  }
  else if (type == 'GridSquareImgCopy') {
    child = el.children(':first');
    child.animate({ width: '461px', height: '249px', marginTop: '0', marginLeft: '0' }, BoxSpeed, function () { CloseBtn.show(); });
    img = child.children('img:first');
    var params = {};
    //if (img.data('large_left')) params.marginLeft = img.data('large_left');
    if (img.data('small_width')) { params.width = img.data('large_width'); params.height = img.data('large_height'); }
    if (params.marginLeft || params.width) img.animate(params, BoxSpeed);
  }
}
function ShrinkIcon(el, type) {
  var child, img, params = {};
  if (type == 'GridSquareImg') {
    child = el.children(':first');
    img = child.children('.imgcontent');
    copy = child.children('.copy');
    params = { marginTop: img.data('marginTop'), marginLeft: img.data('marginLeft'), width: img.data('width'), height: img.data('height') };
    img.animate(params, BoxSpeed);
    copy.fadeOut(BoxSpeed);
  }
  else if (type == 'GridSquareImgCopy') {
    child = el.children(':first');
    img = child.children('img:first');
    child.animate({ marginTop: child.data('marginTop'), marginLeft: child.data('marginLeft') }, BoxSpeed);
    if (img.data('small_width')) { params.width = img.data('small_width'); params.height = img.data('small_height'); }
    //if (img.data('large_left')) params.marginLeft = '0px';
    if (params.marginLeft || params.width) { img.animate(params, BoxSpeed); }
  }
}
function Close() {
  var currentOpened = $('#' + currentOpen);
  CloseBtn.hide();
  LeaveBehinds[0].hide();
  LeaveBehinds[1].stop().animate({ width: '107px', height: '54px', top: currentOpened.data('top'), left: currentOpened.data('left') }, BoxSpeed, function () { LeaveBehinds[1].hide(); });
  currentOpened.addClass('GridSquareActive');
  ShrinkIcon(currentOpened, currentOpened.data('type'));
  var el, type, img, child;
  $('div.GridSquare').each(function (index) {
    el = $(this);
    el.stop().animate({ width: '107px', height: '54px', top: el.data('top'), left: el.data('left') }, BoxSpeed);
  });
  $('#BottomCopy').animate({ width: '570px', left: '54px', top: '330px' }, BoxSpeed);
  isClosed = true;
  currentOpen = '';
}