var tweetindex = 0;
var map;
var twitterIconIndex = 100;
var twitterMarkers = [];
var cat0Markers = [];
var cat1Markers = [];
var cat2Markers = [];
var cat3Markers = [];
var varTwitterToggle = 0;
var varCat0Toggle = 0;
var varCat1Toggle = 0;
var varCat2Toggle = 0;
var varCat3Toggle = 0;
var varmute = 0;

function initialize(zoomlevel, lat, lon) {
    var myOptions = {
        zoom: zoomlevel,
        center: new google.maps.LatLng(lat, lon),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    map = new google.maps.Map(document.getElementById("map"),
                                myOptions);
    setMarkers(map, locs);

    google.maps.event.addListener(map, "drag", function () {
        $("#ballon").hide();
    });
}

function setMarkers(map, locations) {
    var shape = {
        coord: [0, 25, 25, 0],
        type: 'rect'
    };
    for (var i = 0; i < locations.length; i++) {
        var iconloc = locations[i];
        var myLatLng = new google.maps.LatLng(iconloc[1], iconloc[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: (new google.maps.MarkerImage('http://www.avro.nl/gfx/oerol2010/dot_marker' + iconloc[4] + '.png', new google.maps.Size(25, 25), new google.maps.Point(0, 0), new google.maps.Point(12, 12))),
            shape: shape,
            title: iconloc[0],
            zIndex: iconloc[3]
        });
        LocationClick(marker, i, iconloc[1], iconloc[2]);
        switch (iconloc[4]) {
            case 0: cat0Markers.push(marker); break;
            case 1: cat1Markers.push(marker); break;
            case 2: cat2Markers.push(marker); break;
            case 3: cat3Markers.push(marker); break;
        }
    }
}

function LocationClick(marker, number, lat, lon) {
    google.maps.event.addListener(marker, 'click', function () {
        moveToLoc(lat, lon);
        showEvents(marker, number);
    });
}

var offset = 0.02; //verplaats de kaart meer naar beneden

function moveToLoc(lat, lon) {
    map.setZoom(13)
    map.setCenter(new google.maps.LatLng((lat + offset), lon))
}

function showEvents(marker, number) {
    $("#ballon").hide();
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    $("#ballon").show().css({ top: (winHeight / 2) - 265 + (offset * 10000), left: (winWidth / 2) - 263 });
    $("#pnlLocation").text(marker.getTitle()); // + "<> " + (number + 1));
    if (number == 82) {
        $("#pnlScroll").load("doeksen.html");
    } else {
        $("#pnlScroll").load("location.aspx?id=" + (number + 1));
    }


    pause();
}

function twitterMarker(location, message, htmlmessage) {
    //marker placement for tweets
    var twittermarker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'Tweet: ' + message,
        icon: (new google.maps.MarkerImage('http://www.avro.nl/gfx/oerol2010/dot_marker4.png', new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(10, 10))),
        zIndex: twitterIconIndex
    });
    //new InfoBox({ latlng: twitterMarker.getPosition(), map: map });
    TwitterLocationClick(twittermarker, htmlmessage);

    twitterIconIndex = twitterIconIndex + 1;
    twitterMarkers.push(twittermarker);
    $(".TweetDiv0").delay(7000).fadeOut(function () { this.setMap(null); });
}


function TwitterLocationClick(twitterMarker, message) {
    //google.maps.event.addListener(twitterMarker, 'click', function() {
    var infoBox = new InfoBox({ latlng: twitterMarker.getPosition(), map: map, tweet: message, timer: tweetindex });

    google.maps.event.addListener(twitterMarker, 'click', function () {
        var infoBox = new InfoBox({ latlng: twitterMarker.getPosition(), map: map, tweet: message, timer: tweetindex });
        //$(".TweetDiv0").delay(7000).fadeOut(function () { this.setMap(null); });
    });
}

//HACK SVEN
function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.offsetVertical_ = -135;
    this.offsetHorizontal_ = -100;
    this.height_ = 130;
    this.width_ = 200;
    this.message = opts.tweet

    var me = this;
    this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function () {
        return me.panMap.apply(me);
    });

    // Once the properties of this OverlayView are initialized, set its map so
    // that we can display it.  This will trigger calls to panes_changed and
    // draw.
    this.setMap(this.map_);
}

/* InfoBox extends GOverlay class from the Google Maps API
*/
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
*/
InfoBox.prototype.remove = function () {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

/* Redraw the Bar based on the current projection and zoom level
*/
InfoBox.prototype.draw = function () {
    // Creates the element if it doesn't exist already.
    this.createElement();
    if (!this.div_) return;

    // Calculate the DIV coordinates of two opposite corners of our bounds to
    // get the size and position of our Bar
    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (!pixPosition) return;

    // Now position our DIV based on the DIV coordinates of our bounds
    this.div_.style.width = this.width_ + "px";
    this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
    this.div_.style.height = this.height_ + "px";
    this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
    this.div_.style.display = 'block';
};

/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
* object, retrieved by calling getPanes, is null, remove the element from the
* DOM.  If the div exists, but its parent is not the floatPane, move the div
* to the new pane.
* Called from within draw.  Alternatively, this can be called specifically on
* a panes_changed event.
*/
InfoBox.prototype.createElement = function () {
    var panes = this.getPanes();
    var div = this.div_;
    //            if (varTwitterToggle == 0) {
    if (!div) {
        // This does not handle changing panes.  You can set the map to be null and
        // then reset the map to move the div.
        div = this.div_ = document.createElement("div");
        div.setAttribute("class", "TweetDiv"); // + tweetindex
        div.style.border = "0px none";
        div.style.position = "absolute";
        div.style.background = "url('http://www.avro.nl/gfx/oerol2010/OEROL_2010_ballon_twitter.png')";
        div.style.width = this.width_ + "px";
        div.style.height = this.height_ + "px";
        var contentDiv = document.createElement("div");
        contentDiv.style.margin = "8px"
        contentDiv.innerHTML = this.message;

        var topDiv = document.createElement("div");
        topDiv.setAttribute("class", "TweetClose")
        topDiv.style.textAlign = "right";
        var closeImg = document.createElement("img");
        closeImg.style.width = "32px";
        closeImg.style.height = "32px";
        closeImg.style.cursor = "pointer";
        closeImg.src = "http://gmaps-samples.googlecode.com/svn/trunk/images/closebigger.gif";
        topDiv.appendChild(closeImg);

        function removeInfoBox(ib) {
            return function () {
                ib.setMap(null);
            };
        }

        google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));

        div.appendChild(topDiv);
        div.appendChild(contentDiv);
        div.style.display = 'none';
        panes.floatPane.appendChild(div);
        this.panMap();
    } else if (div.parentNode != panes.floatPane) {
        // The panes have changed.  Move the div.
        div.parentNode.removeChild(div);
        panes.floatPane.appendChild(div);
    } else {
        // The panes have not changed, so no need to create or move the div.
    }

    $(".TweetDiv" + tweetindex).delay(7000).fadeOut(function () { this.setMap(null); }); //this.setMap(null);
}

/* Pan the map to fit the InfoBox.
*/
InfoBox.prototype.panMap = function () {
    // if we go beyond map, pan map
    var map = this.map_;
    var bounds = map.getBounds();
    if (!bounds) return;

    // The position of the infowindow
    var position = this.latlng_;

    // The dimension of the infowindow
    var iwWidth = this.width_;
    var iwHeight = this.height_;

    // The offset position of the infowindow
    var iwOffsetX = this.offsetHorizontal_;
    var iwOffsetY = this.offsetVertical_;

    // Padding on the infowindow
    var padX = 40;
    var padY = 40;

    // The degrees per pixel
    var mapDiv = map.getDiv();
    var mapWidth = mapDiv.offsetWidth;
    var mapHeight = mapDiv.offsetHeight;
    var boundsSpan = bounds.toSpan();
    var longSpan = boundsSpan.lng();
    var latSpan = boundsSpan.lat();
    var degPixelX = longSpan / mapWidth;
    var degPixelY = latSpan / mapHeight;

    // The bounds of the map
    var mapWestLng = bounds.getSouthWest().lng();
    var mapEastLng = bounds.getNorthEast().lng();
    var mapNorthLat = bounds.getNorthEast().lat();
    var mapSouthLat = bounds.getSouthWest().lat();

    // The bounds of the infowindow
    var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
    var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
    var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
    var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

    // calculate center shift
    var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
    var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

    // The center of the map
    var center = map.getCenter();

    // The new map center
    var centerX = center.lng() - shiftLng;
    var centerY = center.lat() - shiftLat;

    // center the map to the new shifted center <<< Turned Off bij SPK >>>
    //map.setCenter(new google.maps.LatLng(centerY, centerX));

    // Remove the listener after panning is complete.
    google.maps.event.removeListener(this.boundsChangedListener_);
    this.boundsChangedListener_ = null;
};

//EINDE HACK
function twitterToggle() {
    if (varTwitterToggle == 1) {
        for (i in twitterMarkers) {
            twitterMarkers[i].setMap(map);
            varTwitterToggle = 0;
            $('#legenda_cat4_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink.png)');

        }
    } else {
        for (i in twitterMarkers) {
            twitterMarkers[i].setMap(null);
            varTwitterToggle = 1;
            $('#legenda_cat4_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink_uit.png)');

        }
    }
}

function cat0Toggle() {
    if (varCat0Toggle == 1) {
        for (i in cat0Markers) {
            cat0Markers[i].setMap(map);
            varCat0Toggle = 0;
            $('#legenda_cat0_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink.png)');
        }
    } else {
        for (i in cat0Markers) {
            cat0Markers[i].setMap(null);
            varCat0Toggle = 1;
            $('#legenda_cat0_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink_uit.png)');
        }
    }
}

function cat1Toggle() {
    if (varCat1Toggle == 1) {
        for (i in cat1Markers) {
            cat1Markers[i].setMap(map);
            varCat1Toggle = 0;
            $('#legenda_cat1_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink.png)');
        }
    } else {
        for (i in cat1Markers) {
            cat1Markers[i].setMap(null);
            varCat1Toggle = 1;
            $('#legenda_cat1_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink_uit.png)');
        }
    }
}

function cat2Toggle() {
    if (varCat2Toggle == 1) {
        for (i in cat2Markers) {
            cat2Markers[i].setMap(map);
            varCat2Toggle = 0;
            $('#legenda_cat2_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink.png)');
        }
    } else {
        for (i in cat2Markers) {
            cat2Markers[i].setMap(null);
            varCat2Toggle = 1;
            $('#legenda_cat2_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink_uit.png)');
        }
    }
}

function cat3Toggle() {
    if (varCat3Toggle == 1) {
        for (i in cat3Markers) {
            cat3Markers[i].setMap(map);
            varCat3Toggle = 0;
            $('#legenda_cat3_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink.png)');
        }
    } else {
        for (i in cat3Markers) {
            cat3Markers[i].setMap(null);
            varCat3Toggle = 1;
            $('#legenda_cat3_toggle').css('background-image', 'url(/gfx/oerol2010/Legenda_vink_uit.png)');
        }
    }
}


var vidcounter = 0;

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    mute();
    loadNewVideo(vids[vidcounter], 0);
}


var loopcounter = 0;

function onytplayerStateChange(newState) {
    if (newState == 0 && vidcounter < vids.length) {
        vidcounter++
        loadNewVideo(vids[vidcounter], 0);
    }

    if (vidcounter == vids.length) {
        vidcounter = 0;
        loadNewVideo(vids[0], 0);
    }
}

function loadNewVideo(id, startSeconds) {
    if (ytplayer) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));
    }
}

function cueNewVideo(id, startSeconds) {
    if (ytplayer) {
        ytplayer.cueVideoById(id, startSeconds);
    }
}

function play() {
    if (ytplayer) {
        ytplayer.playVideo();
    }
}

function pause() {
    if (ytplayer) {
        ytplayer.pauseVideo();
    }
}

function stop() {
    if (ytplayer) {
        ytplayer.stopVideo();
    }
}

function ytPrevious() {
    if (ytplayer) {
        vidcounter--;
        loadNewVideo(vids[vidcounter], 0);
    }
}

function ytNext() {
    if (ytplayer) {
        vidcounter++;
        loadNewVideo(vids[vidcounter], 0);
    }
}

function getPlayerState() {
    if (ytplayer) {
        return ytplayer.getPlayerState();
    }
}

function seekTo(seconds) {
    if (ytplayer) {
        ytplayer.seekTo(seconds, true);
    }
}

function getBytesLoaded() {
    if (ytplayer) {
        return ytplayer.getVideoBytesLoaded();
    }
}

function getBytesTotal() {
    if (ytplayer) {
        return ytplayer.getVideoBytesTotal();
    }
}

function getCurrentTime() {
    if (ytplayer) {
        return ytplayer.getCurrentTime();
    }
}

function getDuration() {
    if (ytplayer) {
        return ytplayer.getDuration();
    }
}

function getStartBytes() {
    if (ytplayer) {
        return ytplayer.getVideoStartBytes();
    }
}

function mute() {
    if (ytplayer) {
        if (varmute == 0) {
            ytplayer.mute();
            $('#videoplayer_mute').css('background-image', 'url("/gfx/oerol2010/video_player_mute.png")');
            varmute = 1;
        } else {
            ytplayer.unMute();
            $('#videoplayer_mute').css('background-image', 'url("/gfx/oerol2010/video_player_geluid.png")');
            varmute = 0;
        }
    }
}

function unMute() {
    if (ytplayer) {
        ytplayer.unMute();
    }
}

function getEmbedCode() {
    //alert(ytplayer.getVideoEmbedCode());
}

function getVideoUrl() {
    //alert(ytplayer.getVideoUrl());
}

function setVolume(newVolume) {
    if (ytplayer) {
        ytplayer.setVolume(newVolume);
    }
}

function getVolume() {
    if (ytplayer) {
        return ytplayer.getVolume();
    }
}

function clearVideo() {
    if (ytplayer) {
        ytplayer.clearVideo();
    }
}