(function($) {
    $(document).ready(function() {
		var $control = $('#testButton');
        $('#startSpeedTest').bind('click',
        function() {
            var $bd = $('#speedtest');
            var times = parseInt($('#times', $control).val(), 10);
            $bd.html('');
            $control.hide();

            var start;
            var elapsed;
            var timeName;
            var $divs;
            var interval;
            var cEvents = 0;

            var calc = function() {
                var $msg = $('<span class="msg"> </span>');
                $(this).after($msg);
                $msg.remove();
            };

			var $ul = $('<ul />').appendTo($bd);
            var speedtest1 = function() {
                clearInterval(interval);

                timeName = "Creating " + times + " Div's";
                start = new Date().getTime();    
				var $container = $('<div style="display: none;"></div>');
                for (var i = times; i > 0; i--) {
                    $container.append('<div>' + i + '</div>');
                }
				$bd.prepend($container);
				
                elapsed = new Date().getTime() - start;
                $ul.append('<li>' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                $divs = $('div', $container);
                interval = setInterval(speedtest2, 10);
            };
            var speedtest2 = function() {
                clearInterval(interval);

                timeName = "Nativ looping " + times + " Div's width for";
                start = new Date().getTime();
                for (var i = times; i > 0; i--) {
                    var $msg = $('<span class="msg"> </span>');
                    $divs.eq(i - 1).after($msg);
                    $msg.remove();
                }
                elapsed = new Date().getTime() - start;
                $ul.append('<li style="border-top: 1px solid #ddd;">' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                interval = setInterval(speedtest3, 10);
            };
            var speedtest3 = function() {
                clearInterval(interval);

                timeName = "Looping " + times + " Div's width each";
                start = new Date().getTime();
                $divs.each(calc);
                elapsed = new Date().getTime() - start;
                $ul.append('<li>' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                interval = setInterval(speedtest4, 10);
            };
            var speedtest4 = function() {
                clearInterval(interval);

                timeName = "Looping " + times + " Div's width each anonymous function";
                start = new Date().getTime();
                $divs.each(function() {
                    var $msg = $('<span class="msg"> </span>');
                    $(this).after($msg);
                    $msg.remove();
                });
                elapsed = new Date().getTime() - start;
                $ul.append('<li>' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                interval = setInterval(speedtest5, 10);
            };
            var speedtest5 = function() {
                clearInterval(interval);

                timeName = "Binding " + times + " Div's";
                start = new Date().getTime();
                $divs.bind('special', calc);
                elapsed = new Date().getTime() - start;
                $ul.append('<li style="border-top: 1px solid #ddd;">' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                cEvents = cEvents + elapsed;
                interval = setInterval(speedtest6, 10);
            };
            var speedtest6 = function() {
                clearInterval(interval);

                timeName = "Calling " + times + " Div's";
                start = new Date().getTime();
                $divs.trigger('special');
                elapsed = new Date().getTime() - start;
                $ul.append('<li>' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                cEvents = cEvents + elapsed;
                interval = setInterval(speedtest7, 10);
            };
            var speedtest7 = function() {
                clearInterval(interval);

                timeName = "Unbinding " + times + " Div's";
                start = new Date().getTime();
                $divs.unbind('special');
                elapsed = new Date().getTime() - start;
                $ul.append('<li>' + timeName + ': <strong>' + elapsed + 'ms</strong></li>');
                $ul.append('<li>Total Custom Events: <strong>' + (cEvents + elapsed) + 'ms</strong></li>');
                $bd.append('<strong>Speedtest finished</strong>'); 
	            $control.fadeIn();
            };
            interval = setInterval(speedtest1, 10);
            //speedtest();
        });
    });
})(jQuery);