/* 
 * This script file contains the basic functionality on the website
 */
// cern is a storage for site stuff.
var cern = new Object;
    cern.menus = [];
    cern.template = [];
    cern.json = [];

/*
 * jsonLoad
 *
 * Loads the json-data, from the jsonfile with said name
 */
function jsonLoad(string)
{
    var xhrArgs = {
        handleAs: "json",
        sync : true,
        url : "json/"+string+".json",
        load : function(data) {
            window.cern.json[string] = data;
        }
    }
    dojo.xhrGet(xhrArgs);

}

// init starts the page, loads the about page for starters.
var init = function(){
    // start by showing a loading window in case something stalls
    dojo.style("loader", "display", "block");

    // preload all the JSON data
    jsonLoad('about');
    jsonLoad('workflow');
    jsonLoad('cgn');

    // preload the template

    window.cern.template.text = new dojox.dtl.Template('views/text.html'); // load template

    setupMenus();
    renderView("about");
    dojo.query("#menuAbout").forEach(function(item){
        linkClickActivate(item);
    });
    dojo.style("loader", "display", "none");
}

/*
 * The render function
 */
function renderView(string)
{
    var context = new dojox.dtl.Context(window.cern.json[string]); // load context
    dojo.byId("innercontent").innerHTML = window.cern.template.text.render(context) // render context in main view based on template
}

/*
 * setupMenus
 */
function setupMenus()
{
    cern.menus = [];// menus are stored here for easy retrieval

    // iterate over menu items to attach link handler
    dojo.query("div#menu > ul > li").forEach(function(item){
        cern.menus.push(item.id); // store each menu item
        if(dojo.attr(item.id, "title")) // check that a title is attached, if not link is not activated
            attachLink(item.id) ;
    });

    // Attaches link handler (onclick)
    function attachLink(string)
    {
        dojo.query("#"+string).connect("onclick", function(){
            linkClick(this);
        });
    }

    // the function to be rendered when a user clicks.
    function linkClick(object)
    {
        linkClickDeactivate(); // deactivates active menus
        linkClickActivate(object);
        dojo.addClass(object, "activeMenu");
        renderView(dojo.attr(object.id, "title"));
    }
}
function linkClickDeactivate()
{
    dojo.query(".activeMenu").forEach(function(node,index,arr){
        dojo.animateProperty({
            node: node,
            duration: 100,
            properties: {
                fontSize: {
                    start: "14",
                    end: "12",
                    units: "px"
                },
                color: {
                    start: "white",
                    end:"#e6955b"
                }
            }
        }).play();
        dojo.removeClass(node, "activeMenu")
    });
}
function linkClickActivate(object)
{
    dojo.animateProperty({
        node: object,
        duration: 100,
        properties: {
            fontSize: {
                start: "12",
                end: "14",
                units: "px"
            },
            color: {
                start: "#e6955b",
                end: "white"
            }
        }
    }).play(100);
}