var roomBrowser = (function () {

    var _roomMaps = {
        'lobby-room': {
            'polygon': [{ 'x': 42, 'y': 170 }, { 'x': 225, 'y': 140 }, { 'x': 222, 'y': 203 }, { 'x': 93, 'y': 204 }, { 'x': 8, 'y': 260}],
            'label': {
                'x': 96,
                'y': 172,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/lobby-title.png); width: 49px; height: 30px; cursor: pointer;')
            }
        },
        'cloakroom': {
            'polygon': [{ 'x': 96, 'y': 217 }, { 'x': 222, 'y': 216 }, { 'x': 220, 'y': 262 }, { 'x': 83, 'y': 262}],
            'highlight': {
                'x': 69,
                'y': 191,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/cloakroom-room.png); width: 149px; height: 56px; visibility: hidden')
            },
            'label': {
                'x': 110,
                'y': 225,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/cloakroom-title.png); width: 95px; height: 31px; cursor: pointer;')
            }
        },
        'slower-room': {
            'polygon': [{ 'x': 233, 'y': 144 }, { 'x': 377, 'y': 120 }, { 'x': 421, 'y': 286 }, { 'x': 225, 'y': 286}],
            'highlight': {
                'x': 231,
                'y': 95,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/slower-room.png); width: 204px; height: 179px; visibility: hidden')
            },
            'label': {
                'x': 257,
                'y': 200,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/slower-title.png); width: 109px; height: 32px; cursor: pointer;')
            },
            'link': '/Slower'
        },
        'terrace-room': {
            'polygon': [{ 'x': 398, 'y': 11 }, { 'x': 555, 'y': 10 }, { 'x': 615, 'y': 89 }, { 'x': 541, 'y': 88 }, { 'x': 522, 'y': 57 }, { 'x': 429, 'y': 57}],
            'highlight': {
                'x': 395,
                'y': 0,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/terrace-room.png); width: 225px; height: 83px; visibility: hidden')
            },
            'label': {
                'x': 461,
                'y': 22,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/terrace-title.png); width: 69px; height: 30px; cursor: pointer;')
            },
            'link': '/Terrace'
        },
        'darker-room': {
            'polygon': [{ 'x': 401, 'y': 179 }, { 'x': 519, 'y': 179 }, { 'x': 661, 'y': 225 }, { 'x': 692, 'y': 271 }, { 'x': 421, 'y': 271}],
            'highlight': {
                'x': 413,
                'y': 155,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/darker-room.png); width: 305px; height: 103px; visibility: hidden')
            },
            'label': {
                'x': 463,
                'y': 220,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/darker-title.png); width: 112px; height: 32px; cursor: pointer;')
            },
            'link': '/Darker'
        },
        'faster-room': {
            'polygon': [{ 'x': 100, 'y': 77 }, { 'x': 364, 'y': 80 }, { 'x': 373, 'y': 116 }, { 'x': 66, 'y': 168}],
            'highlight': {
                'x': 45,
                'y': 56,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/faster-room.png); width: 324px; height: 99px; visibility: hidden')
            },
            'label': {
                'x': 167,
                'y': 94,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/faster-title.png); width: 106px; height: 31px; cursor: pointer;')
            },
            'link': '/Faster'
        },
        'harder-room': {
            'polygon': [{ 'x': 371, 'y': 63 }, { 'x': 520, 'y': 63 }, { 'x': 604, 'y': 200 }, { 'x': 521, 'y': 171 }, { 'x': 397, 'y': 172}],
            'highlight': {
                'x': 372,
                'y': 43,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/harder-room.png); width: 252px; height: 151px; visibility: hidden')
            },
            'label': {
                'x': 406,
                'y': 108,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/harder-title.png); width: 113px; height: 30px; cursor: pointer;')
            },
            'link': '/Harder'
        },
        'deeper-room': {
            'polygon': [{ 'x': 141, 'y': 27 }, { 'x': 407, 'y': 27 }, { 'x': 424, 'y': 62 }, { 'x': 128, 'y': 73}],
            'highlight': {
                'x': 100,
                'y': 0,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/deeper-room.png); width: 318px; height: 64px; visibility: hidden')
            },
            'label': {
                'x': 213,
                'y': 30,
                'handle': $(document.createElement('div')).attr('style', 'position: absolute; background-image:url(/Content/Images/deeper-title.png); width: 115px; height: 32px; cursor: pointer;')
            },
            'link': '/Deeper'
        }
    };

    var _mouseCoords = { 'x': 0, 'y': 0 };

    var _container = $('#RoomBrowser');
    var _roomContainer = $(document.createElement('div'));

    var _oldName = '';
    var _oldRoom = null;

    var _animate = false;
    var _currentGraphic = '';

    var _check = true;

    var doesIntersect = function (polyCords, pointX, pointY) {
        var i, j, c = 0;
        for (i = 0, j = polyCords.length - 1; i < polyCords.length; j = i++)
            if (((polyCords[i].y > pointY) != (polyCords[j].y > pointY)) && (pointX < (polyCords[j].x - polyCords[i].x) * (pointY - polyCords[i].y) / (polyCords[j].y - polyCords[i].y) + polyCords[i].x))
                c = !c;

        return c;
    };

    var _o = {
        'start': function () {
            // init maps.
            var offset = _container.offset();

            for (var i in _roomMaps) {
                for (var j in _roomMaps[i].polygon) {
                    _roomMaps[i].polygon[j].x += offset.left - 10;
                    _roomMaps[i].polygon[j].y += offset.top - 5;
                }

                // create handles.
                if (typeof (_roomMaps[i].highlight) !== 'undefined') {
                    _container.append(_roomMaps[i].highlight.handle.attr('rel', i).click((function (id) {

                        var _id = id;


                        return function () {
                            window.location.href = _roomMaps[_id].link;
                        }

                    })(i)));
                }

                _container.append(_roomMaps[i].label.handle.css({ 'left': _roomMaps[i].label.x, 'top': _roomMaps[i].label.y }).attr('rel', i).click((function (id) {

                    var _id = id;


                    return function () {
                        window.location.href = _roomMaps[_id].link;
                    }

                })(i)));
            }

            // track mouse x,y
            $(document).mousemove(function (e) {
                _mouseCoords.x = e.pageX; // +$(this).scrollLeft();
                _mouseCoords.y = e.pageY; // +$(this).scrollTop();

                if (_check) {

                    for (var i in _roomMaps) {
                        if (doesIntersect(_roomMaps[i].polygon, _mouseCoords.x, _mouseCoords.y)) {
                            _o.highlightRoom(i);
                            _o.showRoom(i);
                        } else {
                            _o.lowlightRoom(i);
                        }
                    }
                }
                _check = !_check;
            });
        },
        'highlightRoom': function (name) {
            var room = _roomMaps[name];

            if (typeof room.highlight !== 'undefined')
                room.highlight.handle.animate({ 'opacity': 0.75 }, { 'duration': 200, 'queue': false }).css({ 'top': room.highlight.y, 'left': room.highlight.x, 'visibility': 'visible' });
        },
        'lowlightRoom': function (name) {
            var room = _roomMaps[name];

            if (typeof room.highlight !== 'undefined')
                room.highlight.handle.animate({ 'opacity': 0 }, { 'duration': 200, 'queue': false });
        },
        'showRoom': function (name) {
            if (_oldName == name) return;

            _animate = true;

            _o.hideRoom();

            var newRoom = $('#' + name);
            var x = '#' + (_currentGraphic = (_currentGraphic == 'room-info-bg') ? 'room-info-bg2' : 'room-info-bg');

            var newGraphic = $(x);

            if (newRoom.length > 0) {

                newGraphic.attr('class', name + '-graphic').animate({ 'top': '0px', 'opacity': 1 }, { 'duration': 400, 'queue': false });

                $('#room-stripe-bg').animate({ 'bottom': '0px' }, { 'duration': 450, 'queue': false });

                newRoom.animate({ 'right': '0px', 'opacity': 1 }, { 'duration': 500, 'queue': false, 'complete': function () {
                    _animate = false;
                }
                });

                //if (typeof (_roomMaps[name].link) !== 'undefined')
                //$('#enter-room-link').attr('href', _roomMaps[name].link).animate({ 'bottom': '10px' }, { 'duration': 250, 'queue': false });

                _oldName = name;
                _oldRoom = newRoom;
            } else {
                $('#room-stripe-bg').animate({ 'bottom': '-300px' }, { 'queue': false });

                _oldName = '';
                _oldRoom = null;
                _animate = false;
            }
        },
        'hideRoom': function () {
            if (_oldRoom != null) {
                $('#' + _currentGraphic).animate({ 'top': '-300px', 'opacity': 0 }, { 'duration': 400, 'queue': false });
                $('#enter-room-link').animate({ 'bottom': '-25px' }, { 'duration': 250, 'queue': false });
                _oldRoom.animate({ 'right': '-270px', 'opacity': 0 }, { 'duration': 500, 'queue': false });
            }
        }
    };


    return _o;

})();

$(window).ready(function () {
    roomBrowser.start();

    if (!IsAuth)
        $('#CreateMyProfile').show();
    else
        $('#CreateMyProfile').hide();
});