(function($, undefined) {
    $.fn.norwayCupFlickable = function(options) {
        var element = $($(this)[0]);
        var events;

        if ($.os.ios || $.os.android || $.os.webos) {
            events = {
                start: 'touchstart',
                move: 'touchmove',
                end: 'touchend'
            };
        } else {
            events = {
                start: 'mousedown',
                move: 'mousemove',
                end: 'mouseup'
            };
        }

        var getXY = function(evt) {
            if (evt.touches && evt.touches.length > 0) {
                return [evt.touches[0].clientX, evt.touches[0].clientY];
            } else {
                return [evt.clientX, evt.clientY];
            }
        };

        var containerHeight = $('.norwayCupContainer').height();

        // Bind event when user touches the field.
        $(element).bind(events.start, function(evt) {
            $('.football').css('-webkit-transition', 'none');
            // Reset the ball to original position.
            $('.football').css('left', '130px');
            $('.football').css('top', '140px');

            var keeperClass = $('#keeper').attr('class');
            var ballWidth = $('.football').width();
            var ballHeight = $('.football').height();

            var origin = getXY(evt);
            var current = origin;

            var xStartPos = current[0];
            var yStartPos = current[1];

            console.log('touch start');
            $(element).bind(events.move, function(evt) {
                
                console.log('touch muuve');
                
                evt.preventDefault();
                current = getXY(evt);

                // Correctly adjust for finger placement on ball.
                var deltaX = current[0] - origin[0];
                var deltaY = current[1] - origin[1];

                var ratio = (containerHeight + deltaY)/containerHeight;
                ratio = Math.round(ratio * 100) / 100;

                // Android does not support multiple transforms defined.
                if ($.os.android) {
                    $('.football').css('-webkit-transform', 'translate3d(' + deltaX + 'px, ' + deltaY + 'px, 0) scale(0.3)');
                 // Otherwise we provide movement and scaling
                } else {
                    $('.football').css('-webkit-transform', 'translate3d(' + deltaX + 'px, ' + deltaY + 'px, 0)' + 'scale(' + ratio + ')');
                    console.log('deltax: ' + deltaX +  'deltay: ' + deltaY);
                }
            });

            // Determine what to display after event end.
            $(element).bind(events.end, function(evt) {
                var xEndPos = current[0];
                var yEndPos = current[1];

                // Render shot towards goal.
                $('.football').css('-webkit-transition', '-webkit-transform 0.5s ease');

                // Ball thrown to the left.
                if (xEndPos < xStartPos) {
                    $('#keeper').addClass('keeperLeft');
                    // Place ball in the upper left corner, simulating a score.
                    $('.football').css('-webkit-transform', 'translate3d(-110px, -140px, 0) scale(0.3)');
                // Ball thrown to the right.
                } else if (xEndPos > xStartPos) {
                    $('#keeper').removeClass(keeperClass).addClass('keeperRight');
                    // Place ball in the upper right corner, simulating a score.
                    $('.football').css('-webkit-transform', 'translate3d(80px, -140px, 0) scale(0.3)');                    
                }

                // Conditions for a shot has been met.
                if ((xEndPos < xStartPos) || (xEndPos > xStartPos)) {
                    // Remove the option to move the ball again.
                    $(element.unbind(events.start));
                    // Display goal message.
                    setTimeout("$('.goalMessage').css('display', 'block')", 1200);
                }

                // Unbind the rest of touch events.
                $(element.unbind(events.move));
                $(element.unbind(events.end));
            });
        });
    };
})(Zepto);