goog.provide('sixapart.app.TechTalkDemo');

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.style');
goog.require('goog.ui.CustomButton');
goog.require('goog.ui.decorate');

goog.scope(function(){
  var Dom    = goog.dom;
  var Easing = goog.fx.easing;
  var Events = goog.events;
  var FxDom  = goog.fx.dom;
  var Style  = goog.style;
  var Ui     = goog.ui;

  /**
   * Constructor
   */
  sixapart.app.TechTalk = function() {
    var d = 1000;
    var cb = [];
    goog.array.forEach(['cb-slide-lt', 'cb-slide-rt', 'cb-slide-lb', 'cb-slide-rb',
                        'cb-size-up', 'cb-size-down',
                        'cb-fade-out', 'cb-fade-in',
                        'cb-white', 'cb-red', 'cb-blue', 'cb-green', 'cb-yellow', 'cb-pink', 'cb-black',
                        'cb-scroll-top-left', 'cb-scroll-middle-center', 'cb-scroll-bottom-right',
                        'cb-swipe'], function(value, index) {
      var button = new goog.ui.CustomButton();
      button.decorate(goog.dom.getElement(value));
      cb.push(button);
    });

    /* Slide */
    var box_slide = Dom.getElement('box-slide');
    Events.listen(cb[0], 'action', function(e) {
      var x = Style.getRelativePosition(box_slide, box_slide.parentNode).x;
      var y = Style.getRelativePosition(box_slide, box_slide.parentNode).y;
      var anim = new FxDom.Slide(box_slide, [x, y], [0, 0], d, Easing.easeOut);
      anim.play();
    });
    Events.listen(cb[1], 'action', function(e) {
      var x = Style.getRelativePosition(box_slide, box_slide.parentNode).x;
      var y = Style.getRelativePosition(box_slide, box_slide.parentNode).y;
      var anim = new FxDom.Slide(box_slide, [x, y], [200, 0], d, Easing.easeOut);
      anim.play();
    });
    Events.listen(cb[2], 'action', function(e) {
      var x = Style.getRelativePosition(box_slide, box_slide.parentNode).x;
      var y = Style.getRelativePosition(box_slide, box_slide.parentNode).y;
      var anim = new FxDom.Slide(box_slide, [x, y], [0, 100], d, Easing.easeOut);
      anim.play();
    });
    Events.listen(cb[3], 'action', function(e) {
      var x = Style.getRelativePosition(box_slide, box_slide.parentNode).x;
      var y = Style.getRelativePosition(box_slide, box_slide.parentNode).y;
      var anim = new FxDom.Slide(box_slide, [x, y], [200, 100], d, Easing.easeOut);
      anim.play();
    });
    
    /* Resize */
    var box_resize= Dom.getElement('box-resize');
    Events.listen(cb[4], 'action', function(e) {
      var anim = new FxDom.Resize(box_resize, [30, 30], [100, 100], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, function() { cb[4].setEnabled(false); });
      goog.events.listen(anim, goog.fx.Animation.EventType.END, function() { cb[5].setEnabled(true); });
      anim.play();
    });
    Events.listen(cb[5], 'action', function(e) {
      var anim = new FxDom.Resize(box_resize, [100, 100], [30, 30], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, function() { cb[5].setEnabled(false); });
      goog.events.listen(anim, goog.fx.Animation.EventType.END, function() { cb[4].setEnabled(true); });
      anim.play();
    });
    cb[5].setEnabled(false);

    /* Fade In/Out */
    var box_fade = Dom.getElement('box-fade');
    Events.listen(cb[6], 'action', function(e) {
      var anim = new FxDom.FadeOut(box_fade, d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, function() { cb[6].setEnabled(false); });
      goog.events.listen(anim, goog.fx.Animation.EventType.END, function() { cb[7].setEnabled(true); });
      anim.play();
    });
    Events.listen(cb[7], 'action', function(e) {
      var anim = new FxDom.FadeIn(box_fade, d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, function() { cb[7].setEnabled(false); });
      goog.events.listen(anim, goog.fx.Animation.EventType.END, function() { cb[6].setEnabled(true); });
      anim.play();
    });
    cb[7].setEnabled(false);

    /* BgColorTransform */
    var box_transform = Dom.getElement('box-transform');
    var col = [0, 0, 0];
    Events.listen(cb[8], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [255, 255, 255], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[9], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [255, 0, 0], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[10], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [0, 0, 255], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[11], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [0, 255, 0], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[12], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [255, 255, 0], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[13], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [255, 192, 203], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });
    Events.listen(cb[14], 'action', function(e) {
      var anim = new FxDom.BgColorTransform(box_transform, col, [0, 0, 0], d, Easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE, function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
    });

    /* Scroll */
    var box_scroll = Dom.getElement('box-scroll');
    Events.listen(cb[15], 'action', function(e) {
      var anim = new FxDom.Scroll(box_scroll, [box_scroll.scrollLeft, box_scroll.scrollTop], [0, 0], d, Easing.easeOut);
      anim.play();
    });
    Events.listen(cb[16], 'action', function(e) {
      var anim = new FxDom.Scroll(box_scroll, [box_scroll.scrollLeft, box_scroll.scrollTop], [107, 74], d, Easing.easeOut);
      anim.play();
    });
    Events.listen(cb[17], 'action', function(e) {
      var anim = new FxDom.Scroll(box_scroll, [box_scroll.scrollLeft, box_scroll.scrollTop], [315, 148], d, Easing.easeOut);
      anim.play();
    });

    /* Swipe */
    var box_swipe = Dom.getElement('box-swipe');
    Events.listen(cb[18], 'action', function(e) {
      var x = Style.getRelativePosition(box_swipe, box_swipe.parentNode).x;
      var y = Style.getRelativePosition(box_swipe, box_swipe.parentNode).y;
      var anim = new FxDom.Swipe(box_swipe, [0, 0], [30, 30], d, Easing.easeOut);
      anim.play();
    });

  };

  sixapart.app.TechTalk.disableButton = function(cb) {
    cb.setEnabled(true);
  }

  sixapart.app.TechTalk.enableButton = function(cb) {
    cb.setEnabled(true);
  }

  goog.addSingletonGetter(sixapart.app.TechTalk);

  sixapart.app.TechTalk.getInstance();

});