(function () {
  try {

    // globals
    var $ = jQuery;
    var lib = hsp;
    var centerview = $.fn.centerview;
    var menu = $.fn.accmenu;

    // jquery
    var $cube;
    var $cubeLeft;
    var $cubeFront;
    var $cvcont;
    var $navibarClose;
    var $navibarContent;
    

    // functions
    var simpleslidein;
    
    function onend($elem,fn) {
      var listener = function () {
        fn();
        $elem[0].removeEventListener('webkitTransitionEnd', listener, false);
      }
      $elem[0].addEventListener('webkitTransitionEnd', listener, false);
    };

    function later(fn,delay) {
      delay = delay || 0;
      setTimeout(fn,delay);
    }

    $(document).ready(function () {
      $cube = $('#cube');
      $cubeFront = $('#cube-front');
      $cubeLeft = $('#cube-left');
      $cvcont = $('#centerview-content');
      $navibarClose = $('#navibar-backbutton');
      $navibarContent = $('#navibar-content');
    });

    // transition object
    centerview.transition = {
      show: function () {
        alert('not initialized');
      },
      hide: function () {
        alert('not initialized');
      },
      visible: function () {
        alert('not initialized');
      },
      slidein: function () {
        lib.error('slidein not initialized');
      }
    }
    var t = centerview.transition;
    t.init = function init(opts) {
      var style = opts.transition || 'simple';
      if (style == 'simple') {
        simpleinit();
        t.show = t.simpleshow;
        t.hide = t.simplehide;
        t.visible = t.simplevisible;
        t.slidein = simpleslidein;
      }
      else if (style == 'slide') {
        t = lib.transition.slideinit();
      }
      else {
        lib.error('unknown transition style:'+style);
      }
    }
    // ################ simple transition ######################
    simpleslidein = function simpleslidein($cont,$newcont,direction,aftercopy,cb) {
      
      menu.hideIfSmall();
      if (direction !== 'fromleft') {
        direction = 'fromright';
      }
      var translate = (direction === 'fromright')?'950px':'-950px';
      // prepare
      var slideout = $('<div id="slider"></div>');
      onend(slideout,function () {
        onend(slideout,function () {
          slideout.remove();
          lib.info('slider removed');
        });
        $cont.html($newcont.html());
        aftercopy();
        cb();
        // not trigger the last animation
        later(function () {
          slideout.css({
            opacity : 0,
            '-webkit-transition' : 'opacity 100ms'
          });
        },100);
      });
      //$('#content-background').css('position','relative');
      var w = $cont.width();
      var ww = $(window).width();
      var left = (ww-w) / 2;
      slideout.css({
        position: 'absolute',
        left: left,
        zIndex : 10000,
        width : $cont.css('width')
      });
      slideout.html($newcont.html());
      $cont.before(slideout);
      slideout.css({
        '-webkit-transform' : 'translate3d('+translate+',0,0)'
      });
      later(function () {
        slideout.css({
          '-webkit-transform' : 'translate3d(0,0,0)',
          '-webkit-transition-property' : 'all',
          '-webkit-transition-duration' : '1200ms'
        });
      });
      
    }
    function simpleinit() {
      //      $cubeLeft.css({
      //        '-webkit-transition-property' : 'opacity',
      //        '-webkit-transition-duration' : '1000ms',
      //        opacity : 0
      //      });
      $cvcont.css({
        '-webkit-transition-property' : '-webkit-transform',
        '-webkit-transition-duration' : '400ms'
      });
      $navibarClose.css({
        '-webkit-transition-property' : 'opacity',
        '-webkit-transition-duration' : '400ms',
        display : 'block',
        opacity : 0
      });
      $navibarClose[0].addEventListener('webkitTransitionEnd', function () {
        var opacity = $navibarClose.css('opacity');
        if (opacity == 0) {
          $navibarClose.css({
            display : 'none'
          });
        } else {
      }
      }, false);
      $navibarContent.css({
        '-webkit-transition-property' : 'opacity',
        '-webkit-transition-duration' : '400ms',
        display : 'block',
        opacity : 1
      });
      $cubeLeft.css({
        '-webkit-transition' : 'opacity 400ms',
        zIndex : 4000
      });
    }
    
    t.simpleshow = function simpleshow(cb) {
      lib.info('show cv');
      // remove eventually remaining flyers
      $cube.find('.flyer').remove();
      var flyer = $('<div class="flyer"></div>');
      var ww = $(window).width();
      var height = $(window).height() *1.5;
      flyer.css({
        position: 'absolute',
        left : 0,
        zIndex : 4000,
        backgroundColor : 'white',
        height : height,
        width : ww,
        '-webkit-transform' : 'translate3d(0,0,-3000px) rotateY(180deg)',
        '-webkit-transition-property' : '-webkit-transform opacity',
        '-webkit-transform-origin' : '50% 50%',
        '-webkit-transition-duration' : '1200ms'
      });
      flyer.html($cubeLeft.html());
      onend(flyer, function () {
        $navibarContent.css({
          opacity: 0,
          zIndex : 1
        });
        $navibarClose.css({
          display: 'block',
          opacity: 1,
          zIndex : 1000
        });
        $cubeLeft.css({
          display : 'block',
          opacity : 1
        });

        onend(flyer,function () {
          lib.info('remove flyer');
          flyer.remove();
        });

        later(function () {
          flyer.css({
            '-webkit-transition' : 'opacity 200ms',
            opacity : 0
          });
        },500);
        cb();
      });
      $cube.append(flyer);
      // start animation
      later(function () {
        //        $cubeFront.css({
        //          opacity : 0
        //        });
        flyer.css({
          '-webkit-transform' : 'translate3d(0,0,0) rotateY(0)'
        });
      });
    }
    t.simplehide = function simplehide(cb) {
      lib.info('hide cv');
      $cubeFront.css({
        display : 'block'
      });
      $navibarContent.css({
        opacity: 1,
        zIndex : 1000
      });
      $navibarClose.css({
        opacity: 0,
        zIndex : 1
      });
      onend($cubeLeft,function () {
        $cubeFront.css({
          display : 'block'
        });
        $cubeLeft.css({
          display : 'none'
        });
        if (cb) {
          cb();
        }
      });
      $cubeLeft.css({
        opacity : 0
      });
    }
    t.simplevisible = function simplevisible() {
      return ($cubeLeft.css('display') == 'block')
    }
    

    // ################ cube transition #######################

    t.cubeshow = function () {
    //      $.fn.centerview.runonshow = true;
    //      var w = $('#cube').width()/2;
    //      $('body').css('overflow','hidden');
    //      $('#cube-front').css({
    //        '-webkit-backface-visibility' : 'hidden'
    //      });
    //      $('#centerview-content').css({
    //        'width' : 950,
    //        'margin-left' : 'auto',
    //        'margin-right' : 'auto'
    //      });
    //
    //      $('#cube-left').css({
    //        'display' : 'block',
    //        '-webkit-transform' : 'translateX(-'+w+'px) translateZ(-'+w+'px) rotateY(-90deg)'
    //      });
    //      $('#cube').css({
    //        '-webkit-transition' : 'all 1s ease-out',
    //        '-webkit-transform-style' : 'preserve-3d',
    //        '-webkit-transform-origin-z' : '-'+w+'px',
    //        '-webkit-transform' : 'translateZ(-'+w+'px) rotateY(90deg)'
    //      });
    //
    //      console.log('cube animation done');
    //      return;
    //      $.fn.centerview.header.css('visibility','visible');
    //      $.fn.centerview.header.removeClass('hidden');
    //      $.fn.centerview.cvdiv.css('visibility','visible');
    //      $.fn.centerview.cvdiv.removeClass('hidden');
    }
  } catch(e) {
    lib.handle(e);
  }
})();