$(document).ready(function(e) {
    		/*
				Variables
    		*/
    		var FS              = parseFloat($('html').css('font-size')),
    			container     	= $('#container'),
	    		withPointers	= $('.with-pointer'),
		        pointerTop 		= 0,
		        pointerLeft		= 0,
		        pointerBottom   = 0;

		    /*
				Functions
		    */
		    //	This updates the limit values for the pointers
		    function calculatePointerVariables() {
		        pointerTop    = container.offset().top;
		        pointerBottom = container.offset().top + container.outerHeight();
		        pointerLeft   = container.offset().left;

		        withPointers.each(function(i) {
		            handlePointerPosition($(this), true, i);
		        });
		    }

		    //	This moves a pointer (elm),
		    //	and removes .init if this is for the initial positioning (isInıt)
		    //	and uses pointer's index number (idx, not required)
		    function handlePointerPosition(elm, isInit, idx) {
		        var pointer = elm.children('.pointer'),
		            outerH  = pointer.get(0).offsetHeight,
		            outerW  = pointer.get(0).offsetWidth,
		            atTop   = elm.hasClass('pointer-top');

		        //	If there is no idx, find it for this elm pointer.
		        if(idx == undefined) idx = withPointers.index(elm);

		        //	Calculate maximum points and new top value (and if this has a .pointer-top move it up a little bit)
		        var thisMaxTop    = pointerTop + (idx * (outerH + FS / 3)),
		            thisMaxBottom = pointerBottom - ((withPointers.length - 1 - idx) * (outerH + FS / 3) + outerH),
		            newTop 		  = elm.offset().top + (!atTop ? elm.height() / 2 - outerH / 2 : outerH);
		        
		        //	Clamp the new top value between max top/bottom values
		        newTop = Math.clamp(newTop, thisMaxTop, thisMaxBottom);

		        pointer.css({
		        	'top': newTop,
		        	'left': pointerLeft - outerW/2
		        });

		        //	So, you say, all these calculations were for the initial position? OK, let me handle that, so you can see the pointers (with a little effect)
		        if(isInit) {
		            setTimeout(function() {
		                pointer.removeClass('init');
		            }, (idx * 67) + 10);
		        }
		    }

		    /*
				Events
		    */
		    //	Yeah, the pointers will be updated on scrolling
		    container.on('scroll', function(e) {
		        withPointers.each(function() {handlePointerPosition($(this));});
		    });

		    //	Resize? No problemo! This'll take care of everything.
		    $(window).on('resize', function() {
		    	//	First, set pointers to theirs .init
		        withPointers.children('.pointer').addClass('init');
		        //	Then, calculate new values
		        setTimeout(function() {calculatePointerVariables();}, 555);
		    });

		    //	Listen for a .pointer click to scroll to it's parent.
		    $(this).on('click', '.pointer', function() {
		        var t      = $(this),
		            parent = t.closest('.with-pointer');

		        container.animate({
		        	scrollTop: parent.position().top - container.position().top + container.scrollTop() + parseInt(parent.css('margin-top'))
		        });
		    });

		    /*
				Init
		    */
		    //	Prepare .with-pointers' pointers
        	withPointers.renderPointer();
        	//	Just wait a little for the init
        	setTimeout(function(){calculatePointerVariables();}, 195);
    	});

    	//	This looks so cool!
    	$.fn.renderPointer = function() {
	        this.each(function() {
	            var t = $(this);

	            if(t.find('.pointer').length == 0) {
	                t.prepend('<div class="pointer transition init" title="' + t.text() + '"></div>');
	            }
	        });
	    };

	    /*
			Clamping function
	    */
	    (function() {
            Math.clamp = function(a, b, c) {
                return Math.max(b, Math.min(c, a));
            }
        })();