$(document).ready(astrale_preload_animation);

var astrale_images_loaded = 0;
var astrale_images = new Array();
var animation_images = new Array(
    "img/p01.jpg",
    "img/p02.jpg",
    "img/p03.jpg",
    "img/p04.jpg",
    "img/p05.jpg",
    "img/p06.jpg",
    "img/p07.jpg",
    "img/p08.jpg"
);
var animation_elts = new Array();
var animation_started = false;

var animation_started = false;
var can_start_animation = false;
var banner_finished = false;
var topdelay = 8; //seconds

function astrale_fallback() {
  //return true;

  if ($.browser.msie && parseInt($.browser.version, 10)<=8) {
    return true;
  } else {
    return false;
  }
}

function astrale_preload_animation() {
  //prewiring stuff
  for (var i=0; i<animation_images.length; i++) {
    var oneimg = new Image();
    oneimg.onload = astrale_image_loaded;
    oneimg.src = animation_images[i];
    if (!oneimg.complete) {
      astrale_images.push(oneimg);
    }

    if (i==0) {
      var $myelt = $("<img src='"+animation_images[i]+"' id='bn"+(i+1)+"'>");
    } else {
      var $myelt = $("<div ' id='bn"+(i+1)+"'><img src='"+animation_images[i]+"'></div>");
    }
    $myelt.hide();
    $myelt.appendTo('#anim_holder');

    animation_elts.push($myelt);

  }

  if (astrale_images.length==0) {
    can_start_animation = true;
    //astrale_start_animation();
  }

  setTimeout(astrale_finish_banner, topdelay*1000);
}

function astrale_finish_banner() {
  banner_finished = true;
  if (can_start_animation) {
    astrale_start_animation();
  }
}

function astrale_image_loaded() {
  astrale_images_loaded++;
  if (astrale_images_loaded>=astrale_images.length) {
    can_start_animation = true;
    if (banner_finished) {
      astrale_start_animation();
    }
  }
}

function astrale_start_animation() {
  if (animation_started) return false;

  $("#astrale_loading").hide();
  $("#topimg").fadeOut(200);
  animation_started = true;
  animate_step1();
}

function animate_step1() {
  $("#bn1").css({width:"942px", height:"400px"});
  $("#bn1").fadeIn(600);
  setTimeout(animate_step2, 1000);
}

function animate_step2() {
  if (astrale_fallback()) {
    //nothing..
  } else {
    $("#bn1").animate({width:"1800px", height:"764px", left:"-429px", top:"-182px"}, 450);
  }
  setTimeout(animate_step3, 2000);
}

function animate_step3() {
  var position = 400 - $("#bn2").height();

  if (astrale_fallback()) {
    $("#bn2").css({top:"0px", left:"942px"}).show();
    $("#bn2").animate({left:'0px'}, 500);
  } else {
    $("#bn2").css({opacity: 0, top: position+"px"}).show();
    $("#bn2").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          top: "0px"
        }, 4000);
  }

  setTimeout(animate_step4, 3500);
}

function animate_step4() {

  if (astrale_fallback()) {
    $("#bn3").css({top:"-81px", left:"942px"}).show();
    $("#bn3").animate({left:'0px'}, 500);
  } else {
    $("#bn3").css({left:"0", top:"0"});
    $("#bn3").css({opacity: 0}).show();
    $("#bn3").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          top: "-81px"
        }, 4000);
  }

  setTimeout(animate_step5, 3500);
}

function animate_step5() {
  $("#bn2").hide();

  if (astrale_fallback()) {
    $("#bn4").css({top:"0px", left:"942px"}).show();
    $("#bn4").animate({left:'-81px'}, 500);
  } else {
    $("#bn4").css({left:"0", top:"0"});
    $("#bn4").css({opacity: 0}).show();
    $("#bn4").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          left: "-81px"
        }, 4000);
  }
  setTimeout(animate_step6, 3500);
}

function animate_step6() {
  $("#bn3").hide();

  var position = 942 - $("#bn5").width();

  if (astrale_fallback()) {
    $("#bn5").css({top:"0px", left:"942px"}).show();
    $("#bn5").animate({left:'0px'}, 500);
  } else {
    $("#bn5").css({left: position+"px", opacity: 0}).show();
    $("#bn5").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          left: "0px"
        }, 4000);
  }
  setTimeout(animate_step7, 3500);
}

function animate_step7() {
  $("#bn4").hide();

  if (astrale_fallback()) {
    $("#bn6").css({top:"-72px", left:"942px"}).show();
    $("#bn6").animate({left:'-84px'}, 500);
  } else {
    $("#bn6").css({left: "-84px", top: "0px", opacity: 0}).show();
    $("#bn6").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          top: "-72px"
        }, 4000);
  }
  setTimeout(animate_step8, 3500);
}

function animate_step8() {
  $("#bn5").hide();

  if (astrale_fallback()) {
    $("#bn7").css({top:"0px", left:"942px"}).show();
    $("#bn7").animate({left:'-81px'}, 500);
  } else {
    $("#bn7").css({left:"0", top:"0"});
    $("#bn7").css({opacity: 0}).show();
    $("#bn7").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          left: "-81px"
        }, 4000);
  }
  setTimeout(animate_step9, 3500);
}

function animate_step9() {
  $("#bn6").hide();

  if (astrale_fallback()) {
    $("#bn8").css({top:"-81px", left:"942px"}).show();
    $("#bn8").animate({left:'0px'}, 500);
  } else {
    $("#bn8").css({left:"0", top:"0"});
    $("#bn8").css({opacity: 0}).show();
    $("#bn8").animate({
      opacity: 1
    }, { queue: false, duration: 500})
        .animate({
          top: "-81px"
        }, 4000);
  }
  setTimeout(animate_step10, 3500);
}

function animate_step10() {
  for (var i=1; i<7; i++) {
    animation_elts[i].hide();
  }
  $("#bn1").css({left: "0", top: "0", width:"942px", height:"400px"});
//  $("#bn8").fadeOut(1000);
//  setTimeout(animate_loop, 2000);
  animate_loop();
}

function animate_loop() {
  $("#topimg").fadeIn();
  setTimeout(astrale_another_loop, topdelay*1000);
}

function astrale_another_loop() {
  $("#bn8").hide();
  $("#topimg").fadeOut();
  setTimeout(function() {
    animate_step2();
  }, 500);
}