﻿function Menu() {
    var _this = this;
    var _Data = [];
    var _Settings = { className: '', sourcePath: '', pointer: '' }; // the constructor - so we know what the Settings object looks like.

    this.Settings = function (o) {
        _Settings = o;
    }

    this.Show = function (index) {
        var button = document.getElementById(_Settings.pointer + '_Parent_' + index);
        var menu = document.getElementById(_Settings.pointer + '_Menu_' + index);

        button.className = button.className.replace(/over/g, '') + ' over';

        if (menu) {
            menu.style.display = '';

            var el = jQuery(menu);
            var curHeight = el.height();
            var autoHeight = el.css('height', 'auto').height();

            el.height(autoHeight);

//            if (el.stop != undefined)
//                el.stop();
//            
//            el.animate({ opacity: 1, height: autoHeight }, 250);
        }
    }

    this.Hide = function (index) {
        var button = document.getElementById(_Settings.pointer + '_Parent_' + index);
        var menu = document.getElementById(_Settings.pointer + '_Menu_' + index);
        var el = jQuery(menu);

        button.className = button.className.replace(/over/g, '');

//        if (menu) {
//            if (el.stop != undefined)
//                el.stop();
//                
        //el.animate({ opacity: 0, height: 0 }, 250, function () { menu.style.display = 'none'; });
        if(menu)
            menu.style.display = 'none';
//      }
    }

    this._GetHTML = function () {
        var s = '';

        for (var i = 0; i < _Data.length; i++) {
            var parent = _Data[i];

            s += '<div class="parent" id="' + _Settings.pointer + '_Parent_' + i + '" ';
            s += ' onmouseover="' + _Settings.pointer + '.Show(' + i + ');"';
            s += ' onmouseout="' + _Settings.pointer + '.Hide(' + i + ');"';
            s += ' >';
            s += '  <div class="subparent" id="' + _Settings.pointer + '_SubParent_' + i + '">';

            if (parent.Items.length > 0) {
                s += '<div class="child" id="' + _Settings.pointer + '_Menu_' + i + '" style="display: none; height: 0px;">';

                for (var j = 0; j < parent.Items.length; j++) {
                    var child = parent.Items[j];

                    s += '<div class="item"><a href="' + child.URL + '"><span>' + child.Title + '</span></a></div>';
                }

                s += '</div>';
            }

            s += '    <div class="button"><a href="' + parent.URL + '" id="' + _Settings.pointer + '_Button_' + i + '"><span>' + (parent.Wrap ? parent.Title.replace(/ /g, '<br/>') : parent.Title) + '</span></a></div>';
            s += '  </div>';
            s += '</div>';

            if (i + 1 < _Data.length)
                s += '<div class="sep">|</div>';
        }

        s += '</div>';

        return s;
    }

    this._GetDataSource = function () {
        var o = {
            async: true,
            type: 'GET',
            url: _Settings.sourcePath,
            cache: false,
            data: '',
            error: function (msg) {
                alert('Fail');
            },
            success: function (msg) {
                try {
                    var items = eval('new Object(' + msg + ')');

                    if (items != null && items != undefined && items.length > 0) {
                        _Data = items;

                        var root = document.getElementById(_Settings.pointer + '_Root');

                        root.innerHTML = _this._GetHTML();

                    } else {
                        throw 'Datasource failed to load.';
                    }
                } catch (e) {
                    alert('Datasource failed to load.');
                }
            }
        };

        $.ajax(o);
    }

    this.Draw = function () {
        var s = '';

        s += '<div class="' + _Settings.className + '" id="' + _Settings.pointer + '_Root">Loading...</div>';

        document.write(s);

        _this._GetDataSource();
    }
}
