var timelineHandler = {
    slideDistance: 79 * 5,
    
    left: function() {
        if(timelineHandler.ready) {
            timelineHandler.ready = false;
            
            var newOffset = Math.max(0, -timelineHandler.field.position().left - timelineHandler.slideDistance);
            
            $('#timelineRight').css('visibility', 'visible');
            if(newOffset == 0) $('#timelineLeft').css('visibility', 'hidden');
            
            timelineHandler.field.animate(
                { left: '-' + newOffset + 'px' },
                'normal', 'swing',
                function() { timelineHandler.ready = true; }
            );
        }
    },
    
    right: function() {
        if(timelineHandler.ready) {
            timelineHandler.ready = false;
            
            var leftMax = timelineHandler.field.width() - timelineHandler.view.width();
            var newOffset = Math.min(leftMax, timelineHandler.slideDistance - timelineHandler.field.position().left);
            
            $('#timelineLeft').css('visibility', 'visible');
            if(leftMax == newOffset) $('#timelineRight').css('visibility', 'hidden');
            
            timelineHandler.field.animate(
                { left: '-' + newOffset + 'px' },
                'normal', 'swing',
                function() { timelineHandler.ready = true; }
            );
        }
    },
    
    trackHover: function(eventToTrack) {
        if(analytics && analytics._trackPageview && eventToTrack)
            analytics._trackPageview('/in-history/' + eventToTrack);
        return true;
    },
    
    initialize: function() {
        $(function() {
            timelineHandler.ready = false;
            
            
            $('#timeline div.Marker > img')
                .mouseover(function() {
                    if(!this.associatedBubble) {
                        $('#timeline div.Container').append($(this).siblings('div'));
                        this.associatedBubble = $('#timeline div.Container > div:last');
                    };
                    
                    if(!this.associatedBubbleVisible) {
                        this.associatedBubbleVisible = true;
                        this.associatedBubbleOpened = new Date();
                        
                        var left = $(this.parentNode).position().left + 55 + timelineHandler.field.position().left;
                        if(left < timelineHandler.view.width() / 2) {
                            this.associatedBubble.get(0).className = this.associatedBubble.get(0).className.replace('Mirror', 'Bubble');
                            this.associatedBubble
                                .css('bottom', timelineHandler.field.height() - $(this.parentNode).position().top)
                                .css('left', left)
                                .show();
                        }
                        else {
                            this.associatedBubble.get(0).className = this.associatedBubble.get(0).className.replace('Bubble', 'Mirror');
                            this.associatedBubble
                                .css('bottom', timelineHandler.field.height() - $(this.parentNode).position().top)
                                .css('right', timelineHandler.view.width() - left + 55)
                                .show();
                        }
                    }
                })
                .mouseout(function() {
                    if(this.associatedBubble && this.associatedBubbleVisible) {
                        this.associatedBubbleVisible = false;
                        this.associatedBubble.hide();
                        
                        var timeNow = new Date();
                        if($(this).attr('rel') && this.associatedBubbleOpened && timeNow.valueOf() - this.associatedBubbleOpened.valueOf() > 500)
                            timelineHandler.trackHover($(this).attr('rel'));
                        
                        this.associatedBubbleOpened = false;
                    }
                })
            
            $('#timelineLeft')
                .css('visibility', 'hidden')
                .append('<a href="javascript:timelineHandler.left()" title="Move Timeline Back"><img src="/images/home/timeline/pan-left.png" alt="&lt;" width="18" height="67" /></a>');
            $('#timelineRight')
                .css('visibility', 'hidden')
                .append('<a href="javascript:timelineHandler.right()" title="Move Timeline Forward"><img src="/images/home/timeline/pan-right.png" alt="&gt;" width="18" height="67" /></a>');
            
            timelineHandler.field = $('#timeline .Field');
            timelineHandler.view = $('#timeline .Inside');
            
            if(timelineHandler.field.length && timelineHandler.view.length && timelineHandler.field.width() > timelineHandler.view.width()) {
                $('#timelineRight').css('visibility', 'visible');
                timelineHandler.ready = true;
            }
        });
    }
};

timelineHandler.initialize();