var c_old = 0;
var cate = new Array();
var hex = new Array();
var go_to_top = new Array();
var work_head;

function init_data() {
    cate['xmas_salty_tree'] = "installation design + interface design";
    cate['fieldphone'] = "interaction design + sociable media + installation design";
    cate['orientation_module_on_greenwheel'] = "sensor + microcontroller + software";
    cate['playful_tray'] = "persuasive computing + user experience + software + sensor + interface design + play-based occupational therapy";
    cate['timelesswords'] = "interaction design + mobile application + web application + user experience";

    hex[0] = '#000000';
    hex[1] = '#111111';
    hex[2] = '#222222';
    hex[3] = '#333333';
    hex[4] = '#444444';
    hex[5] = '#555555';
    hex[6] = '#666666';
    hex[7] = '#777777';
    hex[8] = '#888888';
    hex[9] = '#999999';
    hex[10] = '#AAAAAA';
    hex[11] = '#BBBBBB';
    hex[12] = '#CCCCCC';
    hex[13] = '#DDDDDD';
    hex[14] = '#EEEEEE';
    hex[15] = '#FFFFFF';

    go_to_top['about'] = 7;
    go_to_top['work'] = 45;
    go_to_top['contact'] = 248;

    work_head = $.ajax( {
        url: "template/template-work.html",
        async: false
    } ).responseText;
}

jQuery(document).ready( function() {
    init_data();

    $('#menu').mousemove( function(e) {
        var from_top = (e.clientY*1) - ($('#sidebar').css('top').split("px", 1)*1);

        /* set line_follow */
        $('#line_follow').css("margin", (from_top-8)+"px auto auto -9px");
        $('#line_follow').css("height", (317-from_top+8)+"px");

        /* set color */
        var c = "" + (15*from_top/$('#menu').height()) + ".0"; c = c.split('.', 1); c = c*1;
        if(c != c_old) {
            gradual_change_bg(c, Math.abs(c-c_old));
            c_old = c;
        }
    } );

    go_to('about');
} );

function gradual_change_bg(key, arg) {
    var bg_color = hex[15 - key];
    var color = hex[key];

    $(document.body).animate({ backgroundColor: bg_color }, arg*30);
    $(document.body).css("color", color);
    $('.menu_ > a').css("color", color);
    $('a:hover').css("color", color);
}

function go_to(arg) {
    var html = $.ajax( {
        url: arg+".html",
        async: false
    } ).responseText;
    $('#content').html(html);

    /* set line_go_to */
    $('#line_go_to').css("margin", go_to_top[arg]+"px auto auto 5px");
    $('#line_go_to').css("height", (317-go_to_top[arg])+"px");
}

function open_work(arg) {
    var html = $.ajax( {
        url: "work/"+arg+".html",
        async: false
    } ).responseText;
    cate.unshift(cate.shift());
    var head = work_head.replace(/THE_WORK/g, arg)
        .replace(/THE_NAME/g, arg.replace(/_/g, ' ').toUpperCase())
        .replace(/THE_CATE/g, cate[arg].replace(/\+/g, '<span class="conj">+</span>'));
    $('#content').html(head + html);
}