$(document).ready(function () {
    if ($('div[type=pointplacemap]').length > 0) {
        var ss = document.createElement('script');
        ss.src = 'http://maps.google.ru/maps/api/js?sensor=false&callback=loadPointPlaceMaps';
        var hh = document.getElementsByTagName('head')[0];
        hh.appendChild(ss);
    }
});

function loadPointPlaceMaps() {
    $('div[type=pointplacemap]').each(function () {
        $(this).width(parseInt($(this).attr('width')) + 'px');
        $(this).height(parseInt($(this).attr('height')) + 'px');
        $(this).attr('title', '');
        this.className = "pointplacemap";
        new PointPlaceMap(this);
    });
}

var PointPlaceMap = function (div) {
    var map = null;
    var markers = [];
    var markerIndex = 0;
    function initialize() {
        getData();
    }
    function defaultLoad() {
        var pos = new google.maps.LatLng(0, 0);
        var myOptions = {
            zoom: 0,
            center: pos,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(div, myOptions);
    }
    function loadMapSucceed(lmap) {
        var zoom = lmap.Zoom;
        var pos = new google.maps.LatLng(lmap.Latitude, lmap.Longitude);
        var myOptions = {
            zoom: zoom,
            center: pos,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(div, myOptions);
        OS.TC.Portal.WebSite.Modules.Maps.WebServices.Maps.GetMarkers(lmap.Id, function (lmarkers) {
            for (var i = 0; i < lmarkers.length; i++) {
                addMarker(lmarkers[i]);
            }
            initList();
        });
    }
    function getData() {
        try {
            var data = $(div).attr('data');
            if (data.length == 36)
                OS.TC.Portal.WebSite.Modules.Maps.WebServices.Maps.GetMap(data, loadMapSucceed, defaultLoad);
            else
                defaultLoad();
        }
        catch (e) {
            defaultLoad();
        }
    }
    function initList() {
        var ldiv = document.createElement("DIV");
        ldiv.className = "markerlist";
        var up = document.createElement("DIV");
        up.className = "uparrow";
        $(up).bind({
            click: function () {
                if (markerIndex < 1) return;
                markerIndex--;
                $(".markerinfo", infolist).animate({ top: '+=30' }, 300);
                centerCurMarker();
            }
        });
        var down = document.createElement("DIV");
        down.className = "downarrow";
        $(down).bind({
            click: function () {
                if (markerIndex == markers.length - 1) return;
                markerIndex = Math.min(markerIndex + 1, markers.length - 1);
                $(".markerinfo", infolist).animate({ top: '-=30' }, 300);
                centerCurMarker();
            }
        });
        ldiv.appendChild(up);
        ldiv.appendChild(down);
        var infolist = document.createElement("DIV");
        infolist.className = "markerinfolist";
        ldiv.appendChild(infolist);
        for (var i = 0; i < markers.length; i++) {
            var minfo = document.createElement("DIV");
            minfo.className = "markerinfo";
            var span = document.createElement("DIV");
            span.appendChild(document.createTextNode(markers[i].getTitle()));
            minfo.appendChild(span);
            infolist.appendChild(minfo);
        }
        div.appendChild(ldiv);
    }
    function addMarker(obj) {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(obj.Latitude, obj.Longitude),
            title: obj.Title,
            draggable: false
        });
        marker._source = obj;
        markers.push(marker);

        function changeDisplay(e) {
            if (marker._info) marker._info.close();
            var info = new google.maps.InfoWindow({
                content: marker._source.Description
            });
            marker._info = info;
            info.open(map, marker);
        }
        google.maps.event.addDomListener(marker, "click", changeDisplay);
    }
    function centerCurMarker() {
        map.panTo(markers[markerIndex].getPosition());
    }
    initialize();
}