google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
    var mapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(55.466, 10.416),
        styles: [{
            "featureType": "all",
            "elementType": "all",
            "stylers": [{
                "visibility": "on"
            }]
        }, {
            "featureType": "all",
            "elementType": "labels",
            "stylers": [{
                "visibility": "off"
            }, {
                "saturation": "-100"
            }]
        }, {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": [{
                "saturation": 36
            }, {
                "color": "#000000"
            }, {
                "lightness": 40
            }, {
                "visibility": "off"
            }]
        }, {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": [{
                "visibility": "off"
            }, {
                "color": "#000000"
            }, {
                "lightness": 16
            }]
        }, {
            "featureType": "all",
            "elementType": "labels.icon",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#000000"
            }, {
                "lightness": 20
            }]
        }, {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#000000"
            }, {
                "lightness": 17
            }, {
                "weight": 1.2
            }]
        }, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [{
                "color": "#000000"
            }, { "lightness": 20 }]
        }, {
            "featureType": "landscape",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#565656"
            }]
        }, {
            "featureType": "landscape",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#565656"
            }]
        }, {
            "featureType": "landscape.natural",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#565656"
            }]
        }, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [{
                "lightness": 21
            }]
        }, {
            "featureType": "poi",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#565656"
            }]
        }, {
            "featureType": "poi",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#565656"
            }]
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#868686"
            }]
        }, {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#868686"
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#868686"
            }, {
                "lightness": 17
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#868686"
            }, {
                "lightness": 29
            }, {
                "weight": 0.2
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [{
                "color": "#000000"
            },
            {
                "lightness": 18
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#868686"
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#868686"
            }]
        }, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [{
                "color": "#000000"
            }, {
                "lightness": 16
            }]
        }, {
            "featureType": "road.local",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#868686"
            }]
        }, {
            "featureType": "road.local",
            "elementType": "geometry.stroke",
            "stylers": [{ "color": "#868686" }]
        }, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [{
                "color": "#000000"
            }, {
                "lightness": 19
            }]
        }, {
            "featureType": "water",
            "elementType": "all",
            "stylers": [{
                "color": "#313131"
            }, {
                "visibility": "on"
            }]
        }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [{
                "color": "#313131"
            }, {
                "lightness": 17
            }]
        }, {
            "featureType": "water",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#272727"
            }]
        }, {
            "featureType": "water",
            "elementType": "geometry.stroke",
            "stylers":
                [{
                    "color": "#272727"
                }]
        }, {
            "featureType": "water",
            "elementType": "labels",
            "stylers": [{
                "visibility": "off"
            }]
        },
        {
            "featureType": "water",
            "elementType": "labels.text",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "elementType": "labels.text.stroke",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "elementType": "labels.icon",
            "stylers": [{
                "visibility": "off"
            }]
        }]
    };

    var mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);

    function PARKMarker(lat, lng, name, efficiency, power, windspeed, wind, solar, hydro) {
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat, lng);
        this.name = name;
        this.efficiency = efficiency;
        this.power = power;
        this.windspeed = windspeed;
        this.wind = wind;
        this.solar = solar;
        this.hydro = hydro;
    }

    function UNITMarker(lat, lng, name, efficiency, power, windspeed, type) {
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat, lng);
        this.name = name;
        this.efficiency = efficiency;
        this.power = power;
        this.windspeed = windspeed;
        this.type = type;
    }

    PARKMarker.prototype = new google.maps.OverlayView();
    UNITMarker.prototype = new google.maps.OverlayView();

    //init your html element here
    PARKMarker.prototype.onAdd = function () {
        var turbineicon = "";
        var solaricon = "";
        var hydroicon = "";

        if (this.wind) {
           turbineicon = '<span class="icon-stack"><i class="icon icon-parkbg"></i><i class="icon icon-turbinepark2 park parkshiftup"></i></span>';
         //turbineicon = '<img src="/app/core/markers/turbine.png"/>';
        }

        if (this.solar) {
            solaricon = '<span class="icon-stack"><i class="icon icon-parkbg"></i><i class="icon icon-solarpark park parkshiftup"></i></span>';
        //    solaricon = '<img src="/app/core/markers/turbine.png"/>';

        }

        if (this.hydro) {
            hydroicon = '<span class="icon-stack"><i class="icon icon-parkbg"></i><i class="icon icon-hydropark park parkshiftup"></i></span>';
        //    solaricon = '<img src="/app/core/markers/turbine.png"/>';

        }

        div = this.div = document.createElement('DIV');
        this.div.className = "parkMarker";
        this.div.style.position = 'absolute';
        this.div.innerHTML =

            '<div class="markerwrapper">' +
            '<div class="types">' + turbineicon + solaricon + hydroicon + '</div>' +
            '<div class="bar">' +
            '    <div style="width:' + this.efficiency + '%;"></div>' +
            '</div>' +
            '<h2>' + this.name + '</h2></div>';

        div2 = this.div2 = document.createElement('DIV');
        this.div2.className = "overlay";
        this.div2.style.position = 'absolute';
        this.div2.innerHTML =
        '<div class="container"><div class="row headerrow">' +
            '<div class="col-2 "><h2><i class="closeUnit icon icon-close"></i></h2></div>' +
            '<div class="col-8 text-center"><h2 class="gotoUnit">' + this.name + '</h2></div>' +
            '<div class="col-2 text-right"><h2 class="gotoUnit"><i class="icon icon-right-open"></i></div>' + 
            '</div>' +
            '<div class="row mapportfolio">' +
            '<div class="col-4 text-center"><h3 class="color-power">' + this.power + '<span> kW</span></h3><p>Power Production</p></div>' +
            '<div class="col-4 text-center"><h3 class="color-wind">' + this.windspeed + '<span> m/s</span></h3><p>Wind Speed</p></div>' +
            '<div class="col-4 parkaction">' +
            '<p><i class="icon icon-start"></i>  <span class="disabled">Start Park</span></p>' +                    
            '<p><i class="icon icon-stop"></i>  Stop Park</p></div>' +      
            '</div>' +

            '<div class="row data">' +
            '<div class="col-6"><p><i class="icon icon-reports"></i> Reports</p></div>' +
            '<div class="col-6"><p><i class="icon icon-singleline"></i> Single Line Diagram</p></div>' +
            '<div class="col-6"><p><i class="icon icon-predictor"></i> Predictor</p></div>' +
            '<div class="col-6"><p><i class="icon icon-lock"></i> Lock Park</p></div>' +
            '</div></div>';

        var panes = this.getPanes();
        panes.overlayImage.appendChild(this.div);
        panes.overlayImage.appendChild(this.div2);

        var centerlat = this.lat;
        var centerlng = this.lng;
        google.maps.event.addDomListener(div, "click", function (event) {
            $(".overlay").fadeOut();
            $(this).next(".overlay").fadeIn();

            var parentWidth =  Math.round($(this).width());
            var offsetpos = '-' + ((410 - parentWidth)/2) + 'px';
            $(this).next(".overlay").css("margin-left", offsetpos);

            $(this).next(".overlay").find(".gotoUnit").click(function () {
                $(".overlay").fadeOut();
                map.setZoom(14);
                map.setCenter(new google.maps.LatLng(centerlat, centerlng))
            });


            $(this).next(".overlay").find(".closeUnit").click(function () {
                $(".overlay").fadeOut();
                alert("hit");
             });

            $(this).next(".overlay").find(".data").click(function () {
                showDrill();
            });

        });


    };

    UNITMarker.prototype.onAdd = function () {
      
        var uniticon = "";

       if(this.type === "wind_ok") {
       // uniticon = '<img src="/app/core/markers/turbine.png"/>';
       uniticon = '<span class="icon-stack"><i class="icon icon-parkbg unit"></i><i class="icon icon-parkbg state ok"></i><i class="icon icon-turbine unitshiftup"></i></span>';


       }

       if(this.type === "wind_alarm") {
        //uniticon = '<img src="/app/core/markers/turbine_alarm.png"/>';
        uniticon = '<span class="icon-stack"><i class="icon icon-parkbg unit"></i><i class="icon icon-parkbg state alarm"></i><i class="icon icon-turbine unitshiftup"></i></span>';

       }

       if(this.type === "wind_warning") {
        //uniticon = '<img src="/app/core/markers/turbine_warning.png"/>';
        uniticon = '<span class="icon-stack"><i class="icon icon-parkbg unit"></i><i class="icon icon-parkbg state warning"></i><i class="icon icon-turbine unitshiftup"></i></span>';

       }

       if(this.type === "wind_comm") {
        //uniticon = '<img src="/app/core/markers/turbine_comm.png"/>';
        uniticon = '<span class="icon-stack"><i class="icon icon-parkbg unit"></i><i class="icon icon-parkbg state comm"></i><i class="icon icon-turbine unitshiftup"></i></span>';

       }

       if(this.type === "wind_service") {
        //uniticon = '<img src="/app/core/markers/turbine_comm.png"/>';
        uniticon = '<span class="icon-stack"><i class="icon icon-parkbg unit"></i><i class="icon icon-parkbg state service"></i><i class="icon icon-turbine unitshiftup"></i></span>';

       }


        div = this.div = document.createElement('DIV');
        this.div.className = "unitMarker";
        this.div.style.position = 'absolute';
        this.div.innerHTML =
            '<div class="types">' + uniticon + '</div>' +
            '<div class="bar">' +
            '    <div style="width:' + this.efficiency + '%;"></div>' +
            '</div>' +
            '<h2>' + this.name +'</h2>';

        div2 = this.div2 = document.createElement('DIV');
        this.div2.className = "overlay unit";
        this.div2.style.position = 'absolute';
        this.div2.innerHTML =
            
            '<div class="container">' + 
                '<div class="row headerrow">' + 

                '<div class="col-2 "><h2><i class="closeUnit icon icon-close"></i></h2></div>' +
                '<div class="col-8 text-center"><h2 class="gotoUnit">' + this.name + '</h2></div>' +
                '<div class="col-2 text-right"></div>' + 
            




                   /* '<div class="col-12 text-center">' +
                        '<h2>' + this.name + '</h2>' +
                    '</div>' +*/
                '</div>' +
                '<div class="row">' + 
                    '<div class="col-8">' +
                        '<div class="row mapportfolio">' +
                            '<div class="col-5 text-center"><h3 class="color-power">' + this.power + '<span> kW</span></h3><p>Power Production</p></div>' +
                            '<div class="col-3 text-center"><h3 class="color-wind">' + this.windspeed + '<span> m/s</span></h3><p>Wind Speed</p></div>' +
                            '<div class="col-4 text-center">' + 
                            '<div class="notification"><span class="icon-stack"><i class="icon-tri_bg"></i><i class="icon-alert color-alert"></i></span><span class="label-count">6</span></div>' +
                            '<div class="notification"><span class="icon-stack"><i class="icon-tri_bg"></i><i class="icon-warning color-warning"></i></span><span class="label-count">12</span></div>' +

                             //   '<div class="notification"><i class="icon-alert color-alert" style="font-size:16px; line-height:50px;"></i><span class="label-count">5</span></div>' + 
                             //   '<div class="notification"><i class="icon-warning color-warning" style="font-size:16px; line-height:50px;"></i><span class="label-count">5</span></div>' + 


                            '</div>' +
                        '</div>' +

                        '<div class="row data">' +
                            '<div class="col-6"><p><i class="icon icon-details"></i>  Unit Details</p></div>' +
                            '<div class="col-6"><p><i class="icon icon-alarms"></i> Alarms & Events</p></div>' +
                            '<div class="col-6"><p><i class="icon icon-onlinedata"></i> Online Data</p></div>' +
                            '<div class="col-6"><p><i class="icon icon-powercurve"></i> Power Curves</p></div>' +
                            '<div class="col-6"><p><i class="icon icon-historicaldata"></i> Historical Data</p></div>' +
                            '<div class="col-6"><p><i class="icon icon-windrose"></i> Wind Rose</p></div>' +
                        '</div>' + 
                    '</div>' +
                    '<div class="col-4 data sidebar">' +
                        '<p><i class="icon icon-start"></i>  <span class="disabled">Start Turbine</span></p>' +                    
                        '<p><i class="icon icon-stop"></i>  Stop Turbine</p>' +                   
                        '<p><i class="icon icon-reset"></i>  Reset Turbine</p>' +                    
                        '<p><i class="icon icon-lock"></i>  Lock Turbine</p>' +                    
                        '<p><i class="icon icon-remotedisplay"></i> Remote Display</p>' +                    
                        '<p><i class="icon icon-createticket"></i> Create Ticket</p>' +
                    '</div>' +
                '</div>' + 
            '</div>' + 
            '<div class="unitfooter"><h2>KK Park. 10 Vestas XX56 Turbines</h2></div>';

        var panes = this.getPanes();
        panes.overlayImage.appendChild(this.div);
        panes.overlayImage.appendChild(this.div2);

        google.maps.event.addDomListener(div, "click", function (event) {
            $(".overlay").fadeOut();
            $(this).next(".overlay").fadeIn();

            $(this).next(".overlay").find(".closeUnit").click(function () {
                $(".overlay").fadeOut();
             });
        });
    };

    PARKMarker.prototype.draw = function () {
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        this.div.style.left = position.x + 'px';
        this.div.style.top = position.y + 'px';
        this.div2.style.left = position.x + 'px';
        this.div2.style.top = position.y + 'px';
    };

    UNITMarker.prototype.draw = function () {
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        this.div.style.left = position.x + 'px';
        this.div.style.top = position.y + 'px';
        this.div2.style.left = position.x + 'px';
        this.div2.style.top = position.y + 'px';
    };

    parkMarker = [];
    var parks = [
        [56.44, 10.40, 'a c d g i k m o q', 45, '250,600', '5', true, true, false],
        [54.44, 10.40, 'GG Park', 45, '200,600', '15', true, true, false]/*,
        [0, 0, '', 0, '', '', false, false, false]*/
    ];

    unitMarker = [];
    var units = [
        [56.445, 10.39, 'TB 01', 90, '25,600', '5', 'wind_ok'],
        [56.445, 10.40, 'TB 02', 90, '25,600', '5', 'wind_ok'],
        [56.445, 10.41, 'TB 03', 30, '25,600', '5', 'wind_ok'],
        [56.440, 10.39, 'TB 04', 0, '25,600',  '5', 'wind_alarm'],
        [56.440, 10.40, 'TB 05', 90, '25,600', '5', 'wind_ok'],
        [56.440, 10.41, 'TB 06', 20, '25,600', '5', 'wind_warning'],
        [56.435, 10.39, 'TB 07', 90, '25,600', '5', 'wind_ok'],
        [56.435, 10.40, 'TB 08', 0, '25,600', '5', 'wind_comm'],
        [56.435, 10.41, 'TB 09', 90, '25,600', '5', 'wind_ok'],

        [54.435, 10.39, 'TB 07', 90, '25,600', '5', 'wind_ok'],
        [54.435, 10.40, 'TB 08', 90, '25,600', '5', 'wind_ok'],
        [54.435, 10.41, 'TB 09', 90, '25,600', '5', 'wind_service'],

    ];

    function showParks() {
        for (var i = 0; i < parks.length; i++) {
            parkMarker[i] = new PARKMarker(parks[i][0], parks[i][1], parks[i][2], parks[i][3], parks[i][4], parks[i][5], parks[i][6]);
            parkMarker[i].setMap(map);
        }
    }

    function makeUnits() {
        for (var i = 0; i < units.length; i++) {
            unitMarker[i] = new UNITMarker(units[i][0], units[i][1], units[i][2], units[i][3], units[i][4], units[i][5], units[i][6]);
            unitMarker[i].setMap(map);
        }
    }

    function showUnits() {
        if (map.getZoom() > 13) {
            $(".unitMarker").fadeIn();
            $(".parkMarker").fadeOut();
        }
    }

    function hideUnits() {
        if (map.getZoom() < 14) {
            $(".unitMarker").fadeOut();
            $(".parkMarker").fadeIn();
            $(".overlay").fadeOut();
        }
    }



    function showDrill() {
        $("#mapmonitorwrapper").fadeOut("500",  function() {
            $("#mapdrilloverlay").css("left","0px").addClass("shown");
        });
    }

    function hideDrill() {
        $("#mapmonitorwrapper").slideDown("500");

        $("#mapdrilloverlay").slideDown("500").removeClass("shown");
         setTimeout(function(){
            $("#mapdrilloverlay").css("left", "-9999px");
            
         }, 800);
    }

    $(".closeDetail").click(function(){
        hideDrill();
    });


    makeUnits();
    showParks();

    google.maps.event.addListener(map, 'zoom_changed', function () {
        hideUnits();
        showUnits();
    });

    google.maps.event.addListener(map, 'drag', function () {
        $(".overlay").fadeOut();
    });





}

