// globule (G) namespace
var G = {};


// map of screenshot / videos to show
G.documents = {};
G.keys = {};

// misc utility functions
String.prototype.endsWith = function(str) {
    return (this.match(str+"$")==str)
}

String.prototype.trim = function(){
    return (this.replace(/^[\s\xA0]+/, "").replace(/[\s\xA0]+$/, ""))
}

String.prototype.startsWith = function(str) {
    return (this.match("^"+str)==str)
}

// utility function that return a callback to a function with arguments :
// G.callback(fun, a, b c) return a callback that runs fun(a,b,c) on invocation.
G.callback = function() {
    var args = Array.prototype.slice.call(arguments);
    var func = args.shift();
    return function() {
	    return func.apply(null, args.concat(Array.prototype.slice.call(arguments)));
    };
}

G.init = function() {
    $("#tabs li").each(function(num, element) {  $(element).click(G.callback(G.on_click_tab, num)) });
    G.on_click_tab(0);
    
    $(window).bind("resize", G.on_window_resize); 
    $(window).scroll(G.on_window_resize);
    G.on_window_resize();
    $(document).keydown(G.on_document_keydown);
    $("#panel_close").click(G.on_panel_close);
    
    $("#logo").click(G.callback(G.on_click_tab, 0));
    
    $("#play_try").click(function() {document.location="register.html";});
    $("#play_video").click(G.callback(G.panel, "main"));
    $("#play_photo").click(G.callback(G.panel, "presentation"));
    
    $("#security_screenshots").click(G.callback(G.panel, "security")); 
    $("#mobile_screenshots").click(G.callback(G.panel, "mobile")); 
    $("#ink_screenshots").click(G.callback(G.panel, "ink"));  
    $("#register_screenshots").click(G.callback(G.panel, "register"));
    $("#patient_screenshots").click(G.callback(G.panel, "patient"));
    $("#patientfile_screenshots").click(G.callback(G.panel, "patient"));
    $("#prescription_screenshots").click(G.callback(G.panel, "prescription"));
    $("#group_screenshots").click(G.callback(G.panel, "group"));  
    G.fetch_documents();
}

G.fetch_documents = function() {
    $.getJSON("documents.json", {}, G.on_fetch_documents);
}

G.on_fetch_documents = function(data, status) {
    G.documents = data;
    G.handle_video_dash();
}

G.handle_video_dash = function() {
    var hash = window.location.hash;
    if (hash.startsWith("#video")) {
        var comps = hash.split(",", 3);
        var cat = comps[1];
        var key = comps[2];
        G.panel(cat, key);
    }
}

G.panel = function(cat, key) {

    G.lister_clear();
    G.keys = {};
    
    var ul = $("#panel ul");
    G.panel_register(ul, G.documents[cat]);
    
    $("#panel_bg").show().css("opacity", "0.4");
    $("#panel").show();
    
    if (typeof(key) != "string")
        key = "#";
    
    if (G.keys[key]) {
        var all = G.keys[key];
        for (i = 0; i < all.length; i++) {
            $(all[i]).click();    
        }
    }
}

G.panel_register = function(root, items) {
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.type) {
            if (item.type == "flv") 
                G.lister_register_video(root, item);
            if (item.type == "folder") 
                G.lister_register_folder(root, item);
            if (item.type == "image") 
                G.lister_register_image(root, item);
        }
    }
}


G.on_panel_close = function() {
    $("#panel").hide();
    $("#panel_bg").hide();
}

G.on_document_keydown = function(e) {
    if (e.which == 27) { G.on_panel_close(); }
}

G.on_window_resize = function(e) {
    var bh = $(window).height();
    var bw = $(window).width();
    
    var o = $(window).scrollTop();

    $("#panel").css("left", ((bw - 930) / 2) + "px");
    $("#panel").css("top", ((bh - 500) / 2 + o) + "px");

    $("#panel_bg").css("top",     (o) + "px");
}


G.on_click_tab = function(num) {
    $("#tabs li").each(function(i, el) {
        $(el).css("backgroundPosition", (num === i ? -100 :0) + "px -" +  ((i+1)*36) + "px");
        });
    $("#pages").animate({marginLeft:"-" + (num * 750) + "px"}); 
}

G.lister_clear = function() {
    $("#panel ul").empty();
    $("#panel_inner").empty();
}

G.lister_register_folder = function(root, item) {
    var li = $("<li class=\"panel-li-folder\"> <span class=\"panel-li-folder-span\">" + item.title + "</span></li>");
    $(root).append(li);
    
    // keys management
    if (item.key) {
       G.keys[item.key] = li;    
    }
    G.currentfolder=li; // could be a stack
    
    var ul = $("<ul class=\"panel-ul-folder\"/>");
    $(li).append(ul);

    $(ul).hide();    
    $(li).click(function() { $("#panel ul.panel-ul-folder").slideUp();  if (!$(ul).is(':visible')) $(ul).slideDown(); });

    // register children items    
    G.panel_register(ul, item.data);

}

G.lister_register_image = function(root, item) {
	var li = $("<li class=\"panel-li-item\"> <img src=\"" + item.icon + "\" /><span class=\"panel-li-mtitle\"> " + item.title + "</span></li>"); 
    $(root).append(li);

    if (item.key) {
        if (G.currentfolder) {
            G.keys[item.key]= [G.currentfolder, li];
        } else {
           G.keys[item.key] = [li];    
        }
    }
    
    var html = "<img src=\"" + item.url + "\" />";
    
    $(li).click(G.callback(G.lister_on_click, li, html, null));

}

G.lister_register_video = function(root, item) {
    var li = $("<li class=\"panel-li-item\"> <img src=\"" + item.icon + "\" /><span class=\"panel-li-title\"> " + item.title + "</span><span class=\"panel-li-stitle\">duration : " + item.duration + "</span></li>");
    $(root).append(li);

    if (item.key) {
        var comps = item.key.split(",");
        for (var i = 0; i < comps.length; i++) {
            var key = comps[i];
            if (G.currentfolder) {
                G.keys[key]= [G.currentfolder, li];
            } else {
                G.keys[key] = [li];    
            }
        }
    }

	var html = "<a href=\"" + item.url + "\" id=\"videoplayer\" style=\"width:640px;height:480px;\"></a>";

    var postops   =  G.callback(G.lister_display_video, item.url);
    var cb = G.callback(G.lister_on_click, li, html, postops);
    $(li).click(cb);
}

G.lister_display_video = function(url) {

    $f("videoplayer", {src:"/flowplayer/flowplayer-3.1.3.swf", width:640, height:480},
     {
    	    clip : {
		        onStart: function(clip) {  pageTracker._trackEvent("Videos", "Play", clip.url); }, 
		        onPause: function(clip) {  pageTracker._trackEvent("Videos", "Pause", clip.url, parseInt(this.getTime())); }, 
		        onStop: function(clip) { pageTracker._trackEvent("Videos", "Stop", clip.url, parseInt(this.getTime())); }, 
		        onFinish: function(clip) {  pageTracker._trackEvent("Videos", "Finish", clip.url); },
    			autoplay: true,
    			scaling: 'fit'
    	    }
    	}
    );
}

G.lister_on_click = function(li, html, fun) {
    $("#panel_content").html(html);
    $("#panel .panel-li-item").each(function(i) {$(this).css("background-image", "url('resources/panel-li-noarrow.png')");});
    $(li).css("background-image", "url('resources/panel-li-arrow.png')");
    if (fun != null)
        fun();

    return false;
}

$(document).ready(G.init);