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 = '<img src="/app/core/markers/turbine.png"/>';
        }

        if (this.solar) {
            solaricon = '<img src="/app/core/markers/turbine.png"/>';
        }

        if (this.hydro) {
            hydroicon = '<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 =
            '<h2 class="gotoUnit">' + this.name + '<img src="/app/core/images/next.svg"/></h2>' +
            '<div class="container"><div class="row mapportfolio">' +
            '<div class="col-6 text-center"><h3>' + this.power + '<span> kW</span></h3><p>Power Production</p></div>' +
            '<div class="col-6 text-center"><h3>' + this.windspeed + '<span> m/s</span></h3><p>Wind Speed</p></div>' +
            '</div>' +

            '<div class="row data">' +
            '<div class="col-6"><p><img src="/app/core/images/reports.svg"/> Reports</p></div>' +
            '<div class="col-6"><p><img src="/app/core/images/singleline.svg"/>Single Line Diagram</p></div>' +
            '<div class="col-6"><p><img src="/app/core/images/predictor.svg"/> Predictor</p></div>' +
            '<div class="col-6"><p><img src="/app/core/images/lock.svg"/> 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();

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


    };

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

       if(this.type === "wind_ok") {
        uniticon = '<img src="/app/core/markers/turbine.png"/>';
       }

       if(this.type === "wind_alarm") {
        uniticon = '<img src="/app/core/markers/turbine_alarm.png"/>';
       }

       if(this.type === "wind_warning") {
        uniticon = '<img src="/app/core/markers/turbine_warning.png"/>';
       }

       if(this.type === "wind_comm") {
        uniticon = '<img src="/app/core/markers/turbine_comm.png"/>';
       }


        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 =
            '<h2>' + this.name + '</h2>' +
            '<div class="container">' + 
                '<div class="row">' + 
                    '<div class="col-8">' +
                        '<div class="row mapportfolio">' +
                            '<div class="col-5 text-center"><h3>' + this.power + '<span> kW</span></h3><p>Power Production</p></div>' +
                            '<div class="col-3 text-center"><h3>' + this.windspeed + '<span> m/s</span></h3><p>Wind Speed</p></div>' +
                            '<div class="col-4 text-center">' + 
                                '<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><img src="/app/core/images/unitdetails.svg"/> Unit Details</p></div>' +
                            '<div class="col-6"><p><img src="/app/core/images/alarm.svg"/>Alarms & Events</p></div>' +
                            '<div class="col-6"><p><img src="/app/core/images/onlinedata.svg"/> Online Data</p></div>' +
                            '<div class="col-6"><p><img src="/app/core/images/powercurve.svg"/> Power Curves</p></div>' +
                            '<div class="col-6"><p><img src="/app/core/images/historicaldata.svg"/> Historical Data</p></div>' +
                            '<div class="col-6"><p><img src="/app/core/images/windrose.svg"/> Wind Rose</p></div>' +
                        '</div>' + 
                    '</div>' +
                    '<div class="col-4 data sidebar">' +
                        '<p><img src="/app/core/images/start.svg"/> Start Turbine</p>' +                    
                        '<p><img src="/app/core/images/stop.svg"/> Stop Turbine</p>' +                   
                        '<p><img src="/app/core/images/reset.svg"/> Reset Turbine</p>' +                    
                        '<p><img src="/app/core/images/lock.svg"/> Lock Turbine</p>' +                    
                        '<p><img src="/app/core/images/remotedisplay.svg"/> Remote Display</p>' +                    
                        '<p><img src="/app/core/images/createticket.svg"/> 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();
        });
    };

    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, 'KK Park', 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_ok'],

    ];

    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();
        }
    }

    makeUnits();
    showParks();

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

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

}