TOT = {
    fade_time: 218,
    scroll_to_elem: function($elem) {
        $('html, body').animate({scrollTop: $elem.offset().top - 20}, 400);
    }
};

$(function() {
    var effect_selected = function($el) {
        $('#stage-two-loading').show();
        // Reset buttons and bubbles
        $('#stage-two-bubble, #stage-three-bubble, #stage-four-bubble').remove();
        $('#effect-list .effect_button').removeClass('effect_button_selected');
        $el.addClass('effect_button_selected');
        // Load upload bubble
        var effect = $el.closest('li').data('effect');
        $.getJSON('/' + effect + '/upload', {}, function(data) {
            $('#stage-two-loading').hide();
            if (data.success) {
                var $stage_two_bubble = $(data.html);
                $('#stage-two').after($stage_two_bubble);
                $stage_two_bubble.fadeIn(TOT.fade_time, function () {
                    TOT.scroll_to_elem($stage_two_bubble);
                });
            }
        });
        _gaq.push(['_trackEvent', 'Effect', 'selected', effect]);
    };

    // Effect select
    $('.effect_button,.effect_button_selected').click(function() {
        effect_selected($(this));
        return false;
    });

    // Slider
    TOT.slider = {
        tran_time: 218,
        $tray: $("#slider_tray"),
        $caption: $("#slider_caption").hide(),
        $tray_holder: $('#tray-holder'),
        i: 0,
        $current_li: null,
        get_current_li: function() {
            this.$current_li = $(this.$tray.find('li')[this.i]);
        },
        get_next_li: function() {
            if (this.i == this.$tray.find('li').length - 1) {
                this.i = 0;
            } else {
                this.i ++;
            }
            this.get_current_li();
        },
        get_previous_li: function() {
            if (this.i == 0) {
                this.i = this.$tray.find('li').length - 1;
            } else {
                this.i --;
            }
            this.get_current_li();
        },
        center_on_current: function() {
            var holder_center = parseInt(this.$tray_holder.width()/2, 10),
                current_center = parseInt(this.$current_li.position().left + this.$current_li.width()/2 + this.$tray.position().left, 10);
            if (holder_center!=current_center) {
                this.$tray.clearQueue();
                this.$tray.animate({left: '+=' + (holder_center-current_center).toString()}, this.tran_time);
            }
            var $caption = this.$caption,
                $current_li = this.$current_li,
                tran_time = this.tran_time;
            $caption.clearQueue();
            $caption.animate({top: -$caption.outerHeight() + 'px'}, tran_time, function() {
                $caption.hide();
                $caption.text($current_li.data('caption'));
                $caption.show();
                $caption.animate({top: '0px'}, tran_time);
            });
        }
    };
    TOT.slider.get_current_li();
    TOT.slider.center_on_current();
    slider_interval = setInterval(function () {
        TOT.slider.get_next_li();
        TOT.slider.center_on_current();
    }, 3000);
    $('#arrow-left').click(function() {
        clearInterval(slider_interval);
        TOT.slider.get_previous_li();
        TOT.slider.center_on_current();
        return false;
    });
    $('#arrow-right').click(function() {
        clearInterval(slider_interval);
        TOT.slider.get_next_li();
        TOT.slider.center_on_current();
        return false;
    });


    // Slider image click + arrow click
    $('#slider_tray img,#start-button').click(function () {
        TOT.scroll_to_elem($('#effect-select-bubble'));
        return false;
    });

    // POPUP
    $('.popup .popup_inner').css('max-height', ($(window).height()-140) );
    $('.popup').center();

    $(window).bind('resize', function(){
        $('.popup .popup_inner').css('max-height', ($(window).height()-140) );
        $('.popup').center();
    });

    $('.effect_eg').click(function() {
        $('.popup_mask').show();
        $('#' + $(this).closest('li').data('effect') + '_popup').show();
        return false;
    });

    $('.popup_close').click(function() {
        $('.popup_mask').hide();
        $(this).closest('.popup').hide();
        return false;
    });

});

jQuery.fn.center = function () {
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + "px");
    return this;
};