http://arda-maps.org/about/js/info.js

1infoState = (function() {
2    var infosearchsuggestions = "#infoSearchSuggestions";
3    var infosearchsuggestionsCreatures = "#familytreesearchsuggestionsCreatures";
4    var infosearchsuggestionsLocations = "#familytreesearchsuggestionsLocations";
5    var eventNames = ["widthChange"], events = d3.dispatch.apply(null, eventNames);
6
7    function toggle() {
8        var w = width();
9        //$("#timelinearea_de_-1-2").css("width","0px");
10        $("#infoContentSearch").hide();
11        var duration = 500;
12        var targetWidth = $('#infoinner').css("width") == "350px" ? "0px" : "350px";
13        if(!$("#infoinner").is(":visible")) {
14            $("#infoinner").show();
15            $("#infobuttons").css("z-index", "22");
16            $("#infobutton").css("z-index", "22");
17            $("#searchbutton").css("z-index", "23");
18            $("#illustrator").css("z-index", "24");
19        }
20        $('#infoinner').animate({width: targetWidth}, duration, function() {
21            $("#infobutton").addClass("btn-active");
22            if($(this).css("width") == "0px") {
23                $("#infobutton").removeClass("btn-active");
24                $(this).hide();
25                $("#infobuttons").css("z-index", "8");
26                $("#infobutton").css("z-index", "8");
27                $("#searchbutton").css("z-index", "9");
28                $("#illustrator").css("z-index", "19");
29            }
30            events.widthChange(width() - w);
31        });
32    }
33
34    function width() {
35        return $("#infoinner").width();
36    }
37    $("#infobutton").click(toggle);
38
39    $("#searchbutton").click(function() {
40        $(infosearchsuggestions).hide();
41        if($('#infoinner').css("width") == "0px") {
42            $("#infobutton").click();
43        }
44        $("#infoContentSearch").toggle();
45        $("#infoSearch").focus();
46    });
47
48    $("#infoSearch").on('input', function() {
49        if($("#infoSearch").val() == "") {
50            $(infosearchsuggestions).hide();
51        } else {
52            $(infosearchsuggestions).show();
53            orientdb.search4Creature("#infoSearch", infosearchsuggestionsCreatures);
54            orientdb.search4Location("#infoSearch", infosearchsuggestionsLocations);
55        }
56    });
57
58    $("#infoSearch").click(function() {
59        $("#infoSearchSuggestions").toggle();
60    });
61
62    $("#infoSearchSuggestions").on('mouseleave', '', function() {
63        $("#infoSearchSuggestions").hide();
64    });
65
66    $(".infopicture").on('mouseenter mouseleave', '', function() {
67        $(".infopictureSource span").toggleClass("is-highlighted--element");
68    });
69
70    $(".infopicture").click(function() {
71        triggerIllustrator();
72    });
73
74    $(".infopictureSource span").click(function() {
75        triggerIllustrator();
76    });
77
78    function triggerIllustrator() {
79        var illustrator = $(".infopictureSource span").text();
80        var finalString = illustrator.substring(2, illustrator.length);
81        $("#illustratorfooter").hide();
82        $("#illustrator").show();
83        $("#illustratorcontent" + getUnSimplifiedIllustratorName(finalString)).show();
84    }
85
86    $(infosearchsuggestions + " ul").on('click', 'li', function() {
87        orientdb.getInfo4CreatureGenRID(this.id);
88        $(this).addClass("is-highlighted--element");
89    });
90
91    $(infosearchsuggestions + " ul").on('mouseenter mouseleave', 'li', function() {
92        $(this).toggleClass("is-focused");
93    });
94
95    $("#infoClosebutton").click(function() {
96        $("#infoContentSearch").hide();
97    });
98
99    return d3.rebind.bind(null, {
100        width: width,
101        show : function(yes) {
102            if(yes && !infoState.width()) toggle();
103            else if(!yes && infoState.width()) toggle();
104        },
105        events: events
106    }, events, "on").apply(null, events)
107})();