Fonts = {
    aachen: { src: '/flash/aachen.swf' },
    ratios: [6,1.49,8,1.5,9,1.44,12,1.45,17,1.42,18,1.39,23,1.4,24,1.37,30,1.38,39,1.37,54,1.36,89,1.35,90,1.34,92,1.35,93,1.34,95,1.35,96,1.34,97,1.35,99,1.34,100,1.35,1.34]
};
sIFR.activate(Fonts.aachen);
sIFR.replace(Fonts.aachen, { 
    selector: 'h1', 
    css: [
      '.sIFR-root { font-weight: bold; color: #e7e6e5; background-color: #040004; }'
    ],
    ratios: Fonts.ratios
});
sIFR.replace(Fonts.aachen, { 
    selector: 'h2 span', 
    css: [
      '.sIFR-root { font-weight: bold; color: #e7e6e5; background-color: #040004; }'
    ],
    ratios: Fonts.ratios
});
sIFR.replace(Fonts.aachen, { 
    selector: 'div#sub h2', 
    css: [
      '.sIFR-root { font-weight: bold; color: #413d3d; background-color: #040004; }'
    ],
    ratios: Fonts.ratios
});

sIFR.replace(Fonts.aachen, { 
    selector: 'div#main>h2', 
    css: [
      '.sIFR-root { font-weight: bold; color: #e7e6e5; background-color: #040004; }'
    ],
    ratios: Fonts.ratios
});


$(document).ready(function() {
    $("div#header form")
        .find("label").hide()
        .end()
        .find("input:submit").hide()
        .end()
        .find("input:text")
            .each(function () {
                this.label = $("label[for=" + $(this).attr("id") + "]").text();
                if ($(this).attr("value") == undefined) $(this).attr("value", this.label);
            })
            .focus(function () {
                $(this).addClass("focus");
                if ($(this).attr("value") == this.label) $(this).attr("value", "");
            })
            .blur(function () {
                $(this).removeClass("focus");
                if ($(this).attr("value") == undefined) $(this).attr("value", this.label);
            });
});

/*
  Ugh, this is some fugly code. I'm a little bit ashamed... but I'm also too
  excited about this timeline to keep it private while I refactor. I'll 
  rewrite it properly when I get the time. Don't judge me!
*/
var Timeline = {
    container: null,
    handle: null,
    lowest: 0,
    highest: 5.0,
    earliest: null,
    latest: null,
    timespan: null,
    width: 0,
    px_per_day: 40,
    
    plot: function(data) {
        // $("h1").after("<div id='timeline'><ul></ul></div>");
        $("div#timeline").css("backgroundImage", "none");
        this.container = $("div#timeline ul");
        this.container.onselectstart = function() { return false; };
        this.container.unselectable = "on";
        this.container.css("MozUserSelect", "none");
        this.container.css("cursor", "default");
        // this.container.style.MozUserSelect = "none";
        // this.container.style.cursor = "default";
        
        $.each(data.events, bind(Timeline._setHighestAndLowest, Timeline));
        this.timespan = this.latest - this.earliest;
        this.width = $("div#timeline").width();
        
        var days = this.timespan/(1000*60*60*24);
        
        this.container.width(days * this.px_per_day);
        this._addDragging();
        $.each(data.events, bind(Timeline._createPoint, Timeline));
        this._addVerticalMarkers();
        this._addHorizontalMarkers();
        this.container.width(this.width);
    },
    
    _addDragging: function() {
        $("div#timeline").append("<p></p>");
        var nav = $("div#timeline p");
        nav.append("<a>|</a>");
        var handle = nav.find("a");
        
        // evil evil evil - get your scope together muppet
        Timeline.factor = Timeline.container.width() / nav.width();
        
        handle.width(nav.width() / Timeline.factor);
        handle.css("cursor", "move");
        
        var old_x = 0;
        var draggable = false;
        handle.mousedown(function(event) {
            draggable = true;
            old_x = event.pageX;
        });
        nav.click(function(event) {
            var click_x = event.pageX - $("div#timeline").offset().left;
            var new_handle_x = click_x - (handle.width()/2);
            
            Timeline._move(nav, handle, new_handle_x);
        });
        nav.mouseup(function(event) {
            draggable = false;
        });
        nav.mousemove(function(event) {
            if (draggable) {
                var mouse_move_distance = event.pageX - old_x;
                
                var old_handle_x = val_from_px($(handle).css("left"));
                var new_handle_x = old_handle_x + mouse_move_distance;
                
                var old_container_x = val_from_px($(Timeline.container).css("left"));
                var new_container_x = old_container_x - (mouse_move_distance * Timeline.factor);
                
                Timeline._move(nav, handle, new_handle_x, new_container_x);
                
                old_x = event.pageX;
            }
            
        });
    },
    
    _move: function(nav, handle, new_handle_x) {
        var new_container_x = 0 - (new_handle_x * Timeline.factor);
        var skip = false;
        var handle_left = val_from_px(handle.css("left"));
        var handle_right = handle_left + handle.width();
        
        if (handle_left < 0 || new_handle_x < 0) {
            handle.css("left", 0);
            Timeline.container.css("left", 0);
            skip = true;
        }
        if (handle_right > nav.width() || new_handle_x + handle.width() > nav.width()) {
            handle.css("left", nav.width() - handle.width());
            Timeline.container.css("left", (0 - Timeline.container.width() + $("div#timeline").width()) + "px");
            skip = true;
        }
        if (!skip) {
            $(handle).css("left", new_handle_x+"px");
            $(Timeline.container).css("left", new_container_x+"px");
        }
    },
    
    _addVerticalMarkers: function() {
        var h = this.container.height() / this.highest;
        for(var i=0, l=parseInt(this.highest); i<l; i++) {
            var y = (this.highest - i) * h;
            this.container.append("<div class='horizontal' style='top:" + y + "px; height:" + h + "px'></div>");
        }
    },
    
    _addHorizontalMarkers: function() {
        var days = this.timespan/(1000*60*60*24);
        for (var i=8-this.earliest.getDay(), l=days; i<l; i=i+7) {
            var d = new Date(this.earliest.getTime() + (i*24*60*60*1000));
            this.container.append("<div class='vertical' style='left:" + (i * this.px_per_day) + "px'>" + d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear().toString().substring(2,4) + "</div>");
        }
    },
    
    _setHighestAndLowest: function(i, review) {
        var d = new Date(review.start);
        if (this.earliest == null || d < this.earliest) this.earliest = d;
        if (this.latest == null || d > this.latest) this.latest = d;
    },
    
    _createPoint: function(i, review) {
        var id = "review-" + review.id;
        this.container.append("<li class='" + review.rating + "' id='" + id + "'><a href='" + review.link + "'>" + review.title + "</a></li>");
        
        var d = new Date(review.start);
        var x = ((d - this.earliest) / this.timespan) * this.container.width();
        var y = ((this.highest - review.score)/this.highest) * this.container.height();
        if (y + $("#"+id).height() > this.container.height()) y = this.container.height() - $("#"+id).height();
        
        $("#"+id).css({"position": "absolute", "left": x+"px", "top": y+"px"});
        
        var right = val_from_px($("#"+id).css("left")) + $("#"+id).width();
        if (right > this.width) this.width = right;
        
        $("#"+id).hover(
            function() {
                // set z-index
                $(this).addClass("hover");
            }, 
            function() {
                $(this).removeClass("hover");
            }
        );
    }
};

function val_from_px(val) {
    return parseInt(val.replace(/px|pt/, ""));
}

function bind(fn, scope) {
    return function() { fn.apply(scope, arguments); };
}