dojo.require("dojo.fx");

var balls = [];

function Ball(id) {
  var div = dojo.byId("ball"+id);
  var img = dojo.byId("ballimg"+id);
  var glare = dojo.byId("glare"+id);
  var idle = true;
  var focusAnimation = dojo.animateProperty({
    node: img,
    properties: {
      width: {start: 100, end: 110},
      margin: {start: 5, end: 0},
      opacity: {start: 0.6, end: 1}
    },
    duration: 400
  });
  dojo.connect(focusAnimation, "onEnd", function() {
    idle = true;
  });
  var blurAnimation = dojo.animateProperty({
    node: img,
    properties: {
      width: {start: 110, end: 100},
      margin: {start: 0, end: 5},
      opacity: {start: 1, end: 0.6}
    },
    duration: 400
  });
  dojo.connect(blurAnimation, "onEnd", function() {
    dojo.attr(img, "src", "/images/slider/inactive-ball.png");
    dojo.style(img, "opacity", 1);
    idle = true;
  });
  this.initAnimation = dojo.animateProperty({
    node: img,
    properties: {opacity: {start: 0, end: 1}},
    duration: 400
  });
  dojo.connect(this.initAnimation, "onBegin", function() {
    dojo.style(img, "filter", "");
  });
  this.focusBall = function() {
    if ( idle ) {
      idle = false;
      dojo.attr(img, "src", "/images/slider/inactive-ball.png");
      dojo.style(img, "opacity", 0.6);
      focusAnimation.play();
    }
  };
  this.blurBall = function() {
    if ( idle ) {
      idle = false;
      blurAnimation.play();
    }
  }
}

function animateCombs() {
    dojo.fx.combine([
      getCombAnimation("comb11", 0, 3000),
      getCombAnimation("comb9", 100, 2900),
      getCombAnimation("comb10", 500, 2500),
      getCombAnimation("comb8", 600, 2400),
      getCombAnimation("comb7", 700, 2300),
      getCombAnimation("comb6", 1500, 1500),
      getCombAnimation("comb2", 1700, 1300),
      getCombAnimation("comb5", 2500, 500),
      getCombAnimation("comb3", 2600, 400),
      getCombAnimation("comb4", 2800, 200),
      getCombAnimation("comb1", 3000, 0)
    ]).play();
  // let's total time is 6000; one effect is 3000
  setTimeout("animateCombs()", 6100);
}

function getCombAnimation(combId, before, after) {
  return dojo.fx.chain([
    dojo.animateProperty({
      node: dojo.byId(combId),
      properties: {opacity: {start: 0.1, end: 0.1}},
      duration: before
    }),
    dojo.animateProperty({
      node: dojo.byId(combId),
      properties: {opacity: {start: 0.6, end: 0.2}},
      duration: 1000
    }),
    dojo.animateProperty({
      node: dojo.byId(combId),
      properties: {opacity: {start: 0.2, end: 0.1}},
      duration: 2000
    }),
    dojo.animateProperty({
      node: dojo.byId(combId),
      properties: {opacity: {start: 0.1, end: 0.1}},
      duration: after
    })
  ]);
}

function initSlider() {
  for(var i=1; i<5; i++) {
    balls[i] = new Ball(i);
  }

  dojo.fx.chain([
    balls[1].initAnimation,
    dojo.fadeIn({node: dojo.byId("arrow1"), duration: 600}),
    balls[2].initAnimation,
    dojo.fadeIn({node: dojo.byId("arrow2"), duration: 600}),
    balls[3].initAnimation,
    dojo.fadeIn({node: dojo.byId("arrow3"), duration: 600}),
    balls[4].initAnimation
  ]).play();

  for(var i=1; i<5; i++) {
    dojo.connect(dojo.byId("ball"+i), "mouseover", balls[i], "focusBall");
    dojo.connect(dojo.byId("ball"+i), "mouseout", balls[i], "blurBall");
  }
}

dojo.ready(function(){
  initSlider();
  animateCombs();
});