var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
/*

* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps 
* object will be this one
GlobalUI

* all these get added when you are on a page with the Javascript Infovis Toolkit
Settings
Touch
Mouse
Active
Selected
Maps
Mappers
Metacodes
Topics
Synapses
Mappings
Backbone
Create
TopicCard
SynapseCard
Visualize
Util
Realtime
Control
Filter
Listeners
Organize
Topic
Synapse
Map
Mapper
JIT 
*/


$(document).ready(function () {

    for (var prop in Metamaps) {
        
        // this runs the init function within each sub-object on the Metamaps one
        if (Metamaps.hasOwnProperty(prop) &&
            Metamaps[prop].hasOwnProperty('init') &&
            typeof (Metamaps[prop].init) == 'function'
        ) {
            Metamaps[prop].init();
        }
    }

    //Metamaps.Visualize.type = "ForceDirected3D";
    // this line could maybe go at the end of the Metamaps.JIT init function
    if (Metamaps.JIT) Metamaps.JIT.prepareVizData();
});

Metamaps.GlobalUI = {
    notifyTimeout: null,
    init: function () {
        var self = Metamaps.GlobalUI;

        self.Search.init();
        self.MainMenu.init();
        self.CreateMap.init();
        self.Account.init();

        //bind lightbox clicks
        $('.openLightbox').click(function (event) {
            self.openLightbox($(this).attr('data-open'));
            event.preventDefault();
            return false;
        });

        // hide notices after 10 seconds
        $('.notice.metamaps').delay(10000).fadeOut('fast');
        $('.alert.metamaps').delay(10000).fadeOut('fast');
    },
    openLightbox: function (which) {
        $('.lightboxContent').hide();
        $('#' + which).show();

        $('#lightbox_overlay').show();
        $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px');

        if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) {
            $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({
                mouseWheelPixels: 200,
                advanced: {
                    updateOnContentResize: true
                }
            });
            Metamaps.Create.metacodeScrollerInit = true;
        }
        if (which == "switchMetacodes") {
            Metamaps.Create.isSwitchingSet = true;
        }
    },

    closeLightbox: function () {
        $('#lightbox_overlay').hide();
        Metamaps.GlobalUI.CreateMap.reset('fork_map');
        Metamaps.GlobalUI.CreateMap.reset('new_map');
        if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
            Metamaps.Create.cancelMetacodeSetSwitch();
        }
    },
    notifyUser: function (message) {
        var self = Metamaps.GlobalUI;
        
        if ($('.notice.metamaps').length == 0) {
            $('body').prepend('<div class="notice metamaps" />');
        }
        $('.notice.metamaps').hide().html(message).fadeIn('fast');

        clearTimeout(self.notifyTimeOut);
        self.notifyTimeOut = setTimeout(function () {
            $('.notice.metamaps').fadeOut('fast');
        }, 8000);
    }
};

Metamaps.GlobalUI.MainMenu = {
    isOpen: false,
    timeOut: null,
    changing: false,
    init: function () {
        var self = Metamaps.GlobalUI.MainMenu;

        $(".logo").hover(self.open, self.close);

        // when on touch screen, make touching on the logo do what hovering does on desktop
        $("#mainTitle a").bind('touchend', function (evt) {
            if (!self.isOpen) {
                self.openMenu();
                evt.preventDefault();
                evt.stopPropagation();
            }
        });
    },
    open: function () {
        var self = Metamaps.GlobalUI.MainMenu;

        clearTimeout(self.timeOut);
        if (!self.isOpen && !self.changing) {
            self.changing = true;

            // toggle the upper right rounded corner off
            $('.footer').css('border-top-right-radius', '0');

            // move the hamburger menu icon a little bit further out
            $('.logo').animate({
                'background-position-x': '-7px'
            }, 200);

            // fade the main part of the menu in
            $('.footer .menu').fadeIn(200, function () {
                self.changing = false;
                self.isOpen = true;
            });
        }
    },
    close: function () {
        var self = Metamaps.GlobalUI.MainMenu;

        self.timeOut = setTimeout(function () {
            if (!self.changing) {
                self.changing = true;

                // set back to having a rounder upper right corner
                $('.footer').css('border-top-right-radius', '5px');

                // move the hamburger menu icon further to the left, more hidden again
                $('.logo').animate({
                    'background-position-x': '-10px'
                }, 200);

                // fade out the main menu
                $('.footer .menu').fadeOut(200, function () {
                    self.changing = false;
                    self.isOpen = false;
                });
            }
        }, 500);
    }
};


Metamaps.GlobalUI.CreateMap = {
    init: function () {
        
        // bind permission changer events on the createMap form
        $('.permIcon').click(function () {
            $(this).siblings('#map_permission').val($(this).attr('data-permission'));
            $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
            $(this).find('.mapPermIcon').addClass('selected');
        });
        
    },
    reset: function (id) {

        var form = $('#' + id);

        form.find('#map_name').val('');
        form.find('#map_desc').val('');
        form.find('#map_permission').val('commons');

        if (id == "fork_map") {
            form.find('#map_topicsToMap').val('0');
            form.find('#map_synapsesToMap').val('0');
        }

        // remove a selected state from all three of them
        form.find('.mapPermIcon').removeClass('selected');
        // add a selected state back to commons permission, the default
        form.find('.mapCommonsIcon').addClass('selected');

        return false;
    },
};


Metamaps.GlobalUI.Account = {
    isOpen: false,
    timeOut: null,
    changing: false,
    init: function () {
        var self = Metamaps.GlobalUI.Account;

        $(".sidebarAccount").hover(self.open, self.close);
    },
    open: function () {
        var self = Metamaps.GlobalUI.Account;

        clearTimeout(self.timeOut);
        if (!self.isOpen && !self.changing) {
            self.changing = true;
            $('.sidebarAccountBox').fadeIn(200, function () {
                self.changing = false;
                self.isOpen = true;
            });
        }
    },
    close: function () {
        var self = Metamaps.GlobalUI.Account;

        self.timeOut = setTimeout(function () {
            if (!self.changing) {
                self.changing = true;
                $('.sidebarAccountBox').fadeOut(200, function () {
                    self.changing = false;
                    self.isOpen = false;
                });
            }
        }, 500);
    }
};



Metamaps.GlobalUI.Search = {
    isOpen: false,
    timeOut: null,
    changing: false,
    optionsInitialized: false,
    init: function () {
        var self = Metamaps.GlobalUI.Search;

        // bind the hover events
        $(".sidebarSearch").hover(function () {
            self.open()
        }, function () {
            self.close(800, false)
        });

        $('.sidebarSearchIcon').click(function (e) {
            $('.sidebarSearchField').focus();
        });
        $('.sidebarSearch').click(function (e) {
            e.stopPropagation();
        });
        $('body').click(function (e) {
            self.close(0, false);
        });

        // open if the search is closed and user hits ctrl+/
        // close if they hit ESC
        $('body').bind('keydown', function (e) {
            switch (e.which) {
            case 191:
                if (e.ctrlKey && !self.isOpen) {
                    self.open();
                }
                break;
            case 27:
                if (self.isOpen) {
                    self.close(0, true);
                }
                break;
            default:
                break; //console.log(e.which);
            }
        });
        
        self.startTypeahead();
    },
    open: function () {
        var self = Metamaps.GlobalUI.Search;

        clearTimeout(self.timeOut);
        if (!self.isOpen && !self.changing) {
            self.changing = true;
            $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
                width: '200px'
            }, 200, function () {
                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
                    padding: '5px 10px',
                    width: '180px'
                });
                $('.sidebarSearchField').focus();
                self.changing = false;
                self.isOpen = true;
            });
        }
    },
    close: function (closeAfter, bypass) {
        var self = Metamaps.GlobalUI.Search;

        self.timeOut = setTimeout(function () {
            if (!self.changing && self.isOpen && (bypass || $('.sidebarSearchField').val() == '')) {
                self.changing = true;
                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
                    padding: '5px 0',
                    width: '200px'
                });
                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
                    width: '0'
                }, 200, function () {
                    $('.sidebarSearchField').typeahead('setQuery', '');
                    $('.sidebarSearchField').blur();
                    self.changing = false;
                    self.isOpen = false;
                });
            }
        }, closeAfter);
    },
    startTypeahead: function () {
        var self = Metamaps.GlobalUI.Search;

        // TODO stop using userid
        var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
        var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
        var mapperheader = '<h3 class="search-header">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div>';

        var topics = {
            name: 'topics',
            limit: 9999,
            dupChecker: function (datum1, datum2) {
                return false;
            },
            template: $('#topicSearchTemplate').html(),
            remote: {
                url: '/search/topics?term=%QUERY',
                replace: function () {
                    var q = '/search/topics?term=' + $('.sidebarSearchField').val();
                    if ($("#limitTopicsToMe").is(':checked')) {
                        q += "&user=" + userid.toString();
                    }
                    return q;
                },
                filter: function (dataset) {
                    if (dataset.length == 0) {
                        dataset.push({
                            value: "No results",
                            label: "No results",
                            typeImageURL: "/assets/icons/wildcard.png",
                            rtype: "noresult"
                        });
                    }
                    return dataset;
                }
            },
            engine: Hogan,
            header: topicheader
        };

        var maps = {
            name: 'maps',
            limit: 9999,
            dupChecker: function (datum1, datum2) {
                return false;
            },
            template: $('#mapSearchTemplate').html(),
            remote: {
                url: '/search/maps?term=%QUERY',
                replace: function () {
                    var q = '/search/maps?term=' + $('.sidebarSearchField').val();
                    if ($("#limitMapsToMe").is(':checked')) {
                        q += "&user=" + userid.toString();
                    }
                    return q;
                },
                filter: function (dataset) {
                    if (dataset.length == 0) {
                        dataset.push({
                            value: "No results",
                            label: "No results",
                            rtype: "noresult"
                        });
                    }
                    return dataset;
                }
            },
            engine: Hogan,
            header: mapheader
        };

        var mappers = {
            name: 'mappers',
            limit: 9999,
            dupChecker: function (datum1, datum2) {
                return false;
            },
            template: $('#mapperSearchTemplate').html(),
            remote: {
                url: '/search/mappers?term=%QUERY',
                filter: function (dataset) {
                    if (dataset.length == 0) {
                        dataset.push({
                            value: "No results",
                            label: "No results",
                            rtype: "noresult"
                        });
                    }
                    return dataset;
                }
            },
            engine: Hogan,
            header: mapperheader
        };
        $('.sidebarSearchField').typeahead([topics, maps, mappers]);

        //Set max height of the search results box to prevent it from covering bottom left footer
        $('.sidebarSearchField').bind('typeahead:opened', function (event) {
            var h = $(window).height();
            $(".tt-dropdown-menu").css('max-height', h - 100);
        });
        $(window).resize(function () {
            var h = $(window).height();
            $(".tt-dropdown-menu").css('max-height', h - 100);
        });

        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
        $('.sidebarSearchField').bind('typeahead:selected', self.handleResultClick);
        // don't do it, if they clicked on a 'addToMap' button
        $('.sidebarSearch button.addToMap').click(function (event) {
            event.stopPropagation();
        });

        // make sure that when you click on 'limit to me' or 'toggle section' it works
        $('.sidebarSearchField').bind('keyup', self.initSearchOptions);

    },
    handleResultClick: function (event, datum, dataset) {
        var self = Metamaps.GlobalUI.Search;

        if (datum.rtype != "noresult") {
            self.close(0, true);
            var win;
            if (dataset == "topics") {
                win = window.open('/topics/' + datum.id, '_blank');
            } else if (dataset == "maps") {
                win = window.open('/maps/' + datum.id, '_blank');
            } else if (dataset == "mappers") {
                win = window.open('/maps/mappers/' + datum.id, '_blank');
            }
            win.focus();
        }
    },
    initSearchOptions: function () {
        var self = Metamaps.GlobalUI.Search;

        function toggleResultSet(set) {
            var s = $('.tt-dataset-' + set + ' .tt-suggestions');
            if (s.css('height') == '0px') {
                s.css({
                    'height': 'auto',
                    'border-top': 'none',
                    'overflow': 'visible'
                });
                $(this).removeClass('maximizeResults').addClass('minimizeResults');
            } else {
                s.css({
                    'height': '0',
                    'border-top': '1px solid rgb(56, 56, 56)',
                    'overflow': 'hidden'
                });
                $(this).removeClass('minimizeResults').addClass('maximizeResults');
            }
        }

        if (!self.optionsInitialized) {

            $('.limitToMe').bind("change", function (e) {
                // set the value of the search equal to itself to retrigger the autocomplete event
                self.isOpen = false;
                $('.sidebarSearchField').typeahead('setQuery', $('.sidebarSearchField').val());
                setTimeout(function () {
                    self.isOpen = true;
                }, 2000);
            });

            // when the user clicks minimize section, hide the results for that section
            $('.minimizeMapperResults').click(function (e) {
                toggleResultSet.call(this, 'mappers');
            });
            $('.minimizeTopicResults').click(function (e) {
                toggleResultSet.call(this, 'topics');
            });
            $('.minimizeMapResults').click(function (e) {
                toggleResultSet.call(this, 'maps');
            });

            self.optionsInitialized = true;
        }
    }
};