var Mikke;
if (!Mikke) Mikke = {};

Mikke.Map = function(opt) {
    var self = this;

    var opt = opt || {};

    this.lat  = opt.lat  || 37.12;
    this.lon  = opt.lon  || 139.45;
    this.zoom = opt.zoom || 5;

    this.creatureId = opt.creatureId || null;
    this.memberId   = opt.memberId   || null;

    this.mapControlRight = opt.mapControlRight || 10;
    this.mapControlTop   = opt.mapControlTop   || 10;

    this.zoomControlLeft = opt.zoomControlLeft || 10;
    this.zoomControlTop  = opt.zoomControlTop  || 10;

    this.clustererOption = {};
    this.clustererOption.gridSize = opt.clustererOptionGridSize || 50;
    this.clustererOption.maxZoom  = opt.clustererOptionMaxZoom  || 12;
    this.clustererOption.styles = [];

    this.isPrint = opt.print || false;
    this.isMemberProt = opt.isMemberProt || false;
    this.clickDisable = opt.clickDisable || false;

    this.mapType = ({
        'm': G_NORMAL_MAP,
        'k': G_SATELLITE_MAP,
        'h': G_HYBRID_MAP
    })[opt.mapType || 'm'];

    $.each([
        {imageName: 'count_S', size: 35},
        {imageName: 'count_M', size: 40},
        {imageName: 'count_L', size: 44}
    ], function() {
        var ext = self.isPrint ? '.gif' : '.png';
        self.clustererOption.styles.push({
            'url': '/img/map/' + this.imageName + ext,
            'width': this.size,
            'height': this.size,
            'opt_textColor': '#1A1A1A'
        });
    });

    this.init();
};

Mikke.Map.prototype = {

    // 初期化（マップを作成する）
    init: function() {
        var self = this;

        // マップ作成
        self.map = new GMap2($('#mapCanvas').get(0));

        // 初期表示設定
        self.map.setCenter(new GLatLng(self.lat, self.lon), self.zoom);
        self.map.setMapType(self.mapType);

        // コントローラー表示設定
        var mapTypeControl  = new GMapTypeControl();
        var mapTypeSize     = new GSize(self.mapControlRight, self.mapControlTop);
        var mapTypePosition = new GControlPosition(G_ANCHOR_TOP_RIGHT, mapTypeSize);
        self.map.addControl(mapTypeControl, mapTypePosition);

        var zoomControl  = new GSmallMapControl();
        var zoomSize     = new GSize(self.zoomControlLeft, self.zoomControlTop);
        var zoomPosition = new GControlPosition(G_ANCHOR_TOP_LEFT, zoomSize);
        self.map.addControl(zoomControl, zoomPosition);

        // 初期プロットを設定
        if (self.isMemberProt) {
            self.plotMember();
        }
        else if (self.creatureId) {
            self.plotCreature(self.creatureId);
        }

        $(window).unload(GUnload);
    },

    // いきもの毎のデータをプロットする
    plotCreature: function(creatureId) {
        var self = this;

        self.creatureId = creatureId;
        self.isMemberProt = false;

        // プロットデータクリア
        self.clearPoint();
        
        $.ajax({
            type: 'POST',
            url: '/api/map/list',
            data: {creature_id: creatureId},
            dataType: 'json',
            async: false,
            success: function(discoveryData)  {
                self.discoveryData = discoveryData;

                // 表示情報設定
                self.setDiscoveryInfo(self.discoveryData);

                // マーカー設定
                self.setMarkerOption(self.discoveryData.basename);

                // プロット
                self.plotCluster(self.discoveryData);
            }
        });
    },

    // メンバー毎のデータをプロットする
    plotMember: function() {
        var self = this;
        var opt = opt || {};

        self.isMemberProt = true;

        // プロットデータクリア
        self.clearPoint();

        // データ取得
        self.discoveryData = eval("("+$('#memberDiscoveryData').val()+")");

        // 表示情報設定
        self.setDiscoveryInfo(self.discoveryData);

        $.each(self.discoveryData.list, function() {
            // マーカー設定
            self.setMarkerOption(this.basename);

            // プロット
            var marker = self.getMarker(this, this.basename);
            self.map.addOverlay(marker);
        });
    },

    // マーカー設定
    setMarkerOption: function(basename) {
        var self = this;
        var tinyIcon = new GIcon();

        // 印刷ページはアイコンをgifにして影つけない
        if (self.isPrint) {
            tinyIcon.image  = '/img/map/marker_' + basename + '.gif';
        }
        else {
            tinyIcon.image  = '/img/map/marker_' + basename + '.png';
            tinyIcon.shadow  = '/img/map/shadow_' + basename + '.png';
            tinyIcon.ShadowSize = new GSize(69, 31);
        }
        tinyIcon.iconSize = new GSize(46, 49);
        tinyIcon.iconAnchor = new GPoint(46, 49);
        self.markerOptions = { icon:tinyIcon };
    },

    // リストから全てのマーカーをプロットする（近くのやつをまとめる）
    plotCluster: function(discoveryData) {
        var self = this;

        var markers = new Array;
        $.each(discoveryData.list, function() {
            var marker = self.getMarker(this, discoveryData.basename);
            markers.push(marker);
        });

        self.markerCluster = new MarkerClusterer(self.map, markers, self.clustererOption);
    },

    // みっけ報告のデータからマーカーを返す
    getMarker: function(discovery, basename) {
        var self = this;
        var point  = new GLatLng(discovery.lat, discovery.lon);
        var marker = new GMarker(point, self.markerOptions);

        // マーカークリックの吹き出し設定
        if (!self.isPrint && !self.clickDisable) {
            GEvent.addListener(marker, "click", function() {
                var centerPoint = new GLatLng(marker.getLatLng().lat(), marker.getLatLng().lng());
                var currentProjection = self.map.getCurrentMapType().getProjection();
                var zoom = self.map.getZoom();

                var centerPixcel = currentProjection.fromLatLngToPixel(centerPoint, zoom);
                centerPixcel.x = centerPixcel.x + 50;
                centerPixcel.y = centerPixcel.y - 100;
                var currentPosition = currentProjection.fromPixelToLatLng(centerPixcel, zoom);
                self.map.panTo(currentPosition);

                $.ajax({
                    type: 'POST',
                    url: '/api/map/detail',
                    data: { discovery_id: discovery.id },
                    dataType: 'json',
                    success: function(data)  {
                        var popupHTML = [
                            '<div class="popupUnit">',
                                '<p class="photo"><img src="' + data.imageSrc + '" /></p>',
                                '<ul>',
                                    '<li><em>見つけた日：</em>' + data.discoveryDate + '</li>',
                                    '<li><em>見つけた場所：</em>' + data.address + '</li>',
                                    '<li><em>見つけたいきもの：</em><a href="/discovery/detail/' + basename + '" target="_blank">' + data.creatureName + '</a></li>',
                                '</ul>',
                            '</div>'
                        ].join('');
                        setTimeout(function() {
                            self.map.openInfoWindowHtml(point, popupHTML);
                        }, 500);
                    }
                });
            });
        }
        return marker;
    },

    // プロットデータを全てクリア
    clearPoint: function() {
        var self = this;
        self.map.clearOverlays();
        if (self.markerCluster) {
            self.markerCluster.clearMarkers();
        }
    },

    // 報告の情報表示部分設定（ページ右上の部分）
    setDiscoveryInfo: function(discoveryData) {
        var self = this;

        var countArray = discoveryData.count.toString().split('');
        var countHTML = '';
        $.each(countArray, function() {
            countHTML += '<img src="/img/common/no_' + this + '.png" alt="' + this + '" class="countNumImg" width="22" height="29" />';
        });

        var info_bg  = '';
        var memberName = '';

        if (self.isPrint) {
            if (discoveryData.basename) {
                info_bg = '/img/map/bg_info_print_' + discoveryData.basename + '.jpg';
            }
            else if (discoveryData.nickname) {
                info_bg = '/img/map/bg_info_print_my.jpg';
                memberName = discoveryData.nickname;
            }
            $('#discoveryInfo')
                .find('span.info').html('<img src="'+ info_bg +'" />').end()
                .find('span.memberName').html(memberName).end()
                .find('span.countNum').html(countHTML).end()
            ;
        }
        else {
            if (discoveryData.basename) {
                info_bg = '/img/map/bg_info_' + discoveryData.basename + '.png';
            }
            else if (discoveryData.nickname) {
                info_bg = '/img/map/bg_info_myreport.png';
                memberName = discoveryData.nickname;
            }
            else if (discoveryData.communityName) {
                info_bg = '/img/map/bg_info_community.png';
                memberName = discoveryData.communityName;
            }
            $('#discoveryInfo')
                .css('background-image', 'url('+ info_bg +')')
                .find('p.memberName').html(memberName).end()
                .find('span.countNum').html(countHTML).end()
            ;
        }

        $('#discoveryInfo').pngfix().find('.countNumImg').pngfix();
    }
};

Mikke.Grayback = function() {
    this.graybackElem = $('<div>').css({
        'width':      '100%',
        'height':     '100%',
        'position':   'absolute',
        'top':        '0',
        'text-align': 'center',
        'background': '#000',
        'z-index':    '100000',
        'display':    'none',
        'opacity':    '0.4',
        'filter':     'alpha(opacity=40)'
    });

    var img = $('<img>')
        .attr('src', '/img/common/loading.gif')
        .attr('alt', 'loading...')
        .css({
            position: 'relative',
            top: '35%'
        })
    ;

    this.graybackElem.append(img);
    $('body').append(this.graybackElem);
};

Mikke.Grayback.prototype = {
    start: function() {
        var self = this;

        self.graybackElem.show();
    },

    end: function() {
        var self = this;

        self.graybackElem.hide();
    }
};

$.fn.pngfix = function() {
    if (!($.browser.msie && $.browser.version == "6.0")) return this;

    var getFilterStyle = function(src, sizing) {
        var dx = 'DXImageTransform.Microsoft.AlphaImageLoader';
        return 'progid:' + dx + '(src="' + src + '",sizingMethod=' + sizing +')';
    };

    return this.each(function() {
        var $elem = $(this);

        // 通常画像
        if (this.tagName.toLowerCase() == 'img') {
            var imgpngStyle  = {
                'filter': getFilterStyle($elem.attr('src'), 'crop'),
                'width':  $elem.width(),
                'height': $elem.height(),
                'zoom':   '1'
            };
            $elem.css(imgpngStyle).attr('src', '/js/clear.gif');
        }

        // 背景画像
        else {
            var bgImage = $elem.css('backgroundImage');
            if (bgImage != 'none') {
                var bgpngSrc = bgImage.replace(/url\(\"?(.*)\"?\)/, '$1');
                var bgpngSizing = ($elem.css('backgroundRepeat') === 'no-repeat') ? 'crop' : 'scale';
                var bgpngStyle  = {
                    'filter': getFilterStyle(bgpngSrc, bgpngSizing),
                    'background-image': 'none',
                    'zoom': '1'
                };
                $elem.css(bgpngStyle);
            }
        }
    });
};