$(function() {
  var themePath = Drupal.settings.current_theme_path;

  $("a.cufon-set").mouseover(function () {
    Cufon.set('fontFamily', $(this).attr('id'));
    Cufon.refresh();
  });

  $("a.bg-set").mouseover(function () {
    $('body').css('background-image','url('+themePath+'images/backgrounds/'+$(this).attr('id')+'.jpg)');
  });

  $("div.play-animation").click(function () {
    $('#container').css('min-width', '0');
    $('#container').css('max-width', 'none');
    pagerAnim();
    containerAnim();
  });

  function pagerAnim()  {
    $('#ch1').animate(
      {'fontSize': '200%'},
      1000,
      "swing"
    ).css('color','#b91553').animate({opacity: 1.0}, 9000).animate(
      {'fontSize': '100%'},
      1000,
      "swing"
    );
    $('#ch2').animate({opacity: 1.0}, 10000).animate(
      {'fontSize': '200%'},
      1000,
      "swing"
    ).css('color','#b91553').animate({opacity: 1.0}, 6100).animate(
      {'fontSize': '100%'},
      1000,
      "swing"
    );
    $('#ch3').animate({opacity: 1.0}, 17100).animate(
      {'fontSize': '200%'},
      1000,
      "swing"
    ).css('color','#b91553').animate({opacity: 1.0}, 6000).animate(
      {'fontSize': '100%'},
      1000,
      "swing"
    ).animate({opacity: 1.0}, 2000, cleanUp);
  }

  function cleanUp()  {
    $('.adtblocks .render').remove();
    $('.adtblocks .block').css('width', '100%');
    $('#anim-chapters li').css('color','#222222')
  }


  function containerAnim() {
    $('#container').animate(
      {'width': '95%'},
      4000,
      "swing"
    ).animate(
      {'width': '600px'},
      4000,
      "swing"
    ).animate(
      {'width': '960px'},
      2000,
      "swing",
      columnsAnim
    );
  }

  function columnsAnim() {
    $('#content').animate(
      {'width': '30%'},
      3000,
      "swing"
    ).animate(
      {'width': '70%'},
      100,
      "swing"
    ).animate(
      {'width': '54%'},
      3000,
      "swing",
      addBlock1
    );
    $('.sidebar').animate(
      {'width': '35%'},
      3000,
      "swing"
    ).animate(
      {'width': '15%'},
      100,
      "swing"
    ).animate(
      {'width': '23%'},
      3000,
      "swing"
    );
  }

  function addBlock1() {
    $('.preblocks .block').animate(
      {'width': '50%'},
      2000,
      "swing",
      function () { preblocks1() }
    );
    $('.postblocks .block').animate(
      {'width': '50%'},
      2000,
      "swing",
      function () { postblocks1() }
    );
  }

  function preblocks1() {
    $('.preblocks').prepend('<div class="block block-block region-odd odd region-count-1 count-1 first callout-1 render" ><div class="block-inner clearfix"> <h2 class="title blocktitle"><span>Dynamic Region 1</span></h2> <div class="content"> <p>This is the "pre-blocks" region.<br /> You can put as many blocks as you like in here</p>  </div> </div></div><!-- end .inner --><!-- end .block --> ');
    $('.preblocks .block').css('width', '50%');
  }
  function postblocks1() {
    $('.postblocks').prepend('<div class="block block-block region-odd odd region-count-1 count-1 first callout-1 render" ><div class="block-inner clearfix"> <h2 class="title blocktitle"><span>Dynamic Region 2</span></h2> <div class="content"> <p>This is the "post-blocks" region.<br /> You can put as many blocks as you like in here</p></p>  </div> </div></div><!-- end .inner --><!-- end .block --> ');
    $('.postblocks .block').css('width', '50%');
    addBlock2();
  }

  function addBlock2() {
    $('.preblocks .block').animate({opacity: 1.0}, 2000).animate(
      {'width': '25%'},
      2000,
      "swing",
      function () { preblocks2() }
    );
    $('.postblocks .block').animate({opacity: 1.0}, 2000).animate(
      {'width': '25%'},
      2000,
      "swing",
      function () { postblocks2() }
    );
  }

  function preblocks2() {
    $('.preblocks .last').before('<div class="block block-block region-odd odd region-count-1 count-1 callout-3 render" ><div class="block-inner clearfix"> <h2 class="title blocktitle"><span>Dynamic Region 1</span></h2> <div class="content"> <p>This is the "pre-blocks" region.<br /> You can put as many blocks as you like in here</p>  </div> </div></div><!-- end .inner --><!-- end .block --> ');
    $('.preblocks .block').css('width', '25%');
  }
  function postblocks2() {
    $('.postblocks .last').before('<div class="block block-block region-odd odd region-count-1 count-1 callout-3 render" ><div class="block-inner clearfix"> <h2 class="title blocktitle"><span>Dynamic Region 2</span></h2> <div class="content"> <p>This is the "post-blocks" region.<br /> You can put as many blocks as you like in here</p></p>  </div> </div></div><!-- end .inner --><!-- end .block --> ');
    $('.postblocks .block').css('width', '25%');
  }

});