var fArray = new Array();
var items;
var map;
var gmarker = new Array();

function displaySub(array) {
    var subMenu = document.getElementById("submenu");
    if (subMenu == null) return;
    if (array != null && !items.selected) {
        var oldChilds = subMenu.children[0].children;
        subMenu.children[0].innerHTML = '';

        for (var x = 0; x < array.length; x++) {
            var newLi = "<li><a href=\"" + array[x][1] + "\" title=\"" + array[x][2] + "\">" + array[x][0] + "</a></li>";
            subMenu.children[0].innerHTML = subMenu.children[0].innerHTML + newLi;
        }

        // clean and reinit array
        fArray = null; fArray = new Array();
        if (items.length > 0) {
            items.selected = true;
        }
    }
    
    if(array == null && !tmp.selected){
        subMenu.children[0].innerHTML = '';
    }
}

function changeShot(imageFile) {
    document.getElementById('webcamShot').src = imageFile;
}

function displayGMap() {
    var GMap = $("#gmap");
    if (GMap.length > 0) {

        // initialize google maps v3
        var GData = document.getElementById("gdata").value;
        GData = GData.split(",");

        var latlng = new google.maps.LatLng(GData[0], GData[1]);
        var myOptions = {
            zoom: 6,
            center: latlng,
            mapTypeId:  google.maps.MapTypeId.ROADMAP,
                        navigationControl: true,
                        mapTypeControl: true,
                        scaleControl: true,
                        streetViewControl: true
        };

        map = new google.maps.Map(document.getElementById("gmap"),
        myOptions);

        google.maps.event.trigger(map, 'resize');

        // create marker within map
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Hartman Seatrade'
        });
    }
}

function getMarkerData(id)
{
    return document.getElementById(id).value.split(","); 
}

function displayProjectGMap() {
    var GMap = $("#current-gmap");
    if (GMap.length > 0) {

        var markers = new Array();
        markers.push({
        latlng: new google.maps.LatLng(parseFloat(getMarkerData("gdata")[0]), parseFloat(getMarkerData("gdata")[1])),
            image: '/images/boat.png',        
            name: 'Current ship position'
        });

        markers.push({
        latlng: new google.maps.LatLng(parseFloat(getMarkerData("ToPortGPS")[0]), parseFloat(getMarkerData("ToPortGPS")[1])),
            image: '/images/toport.png',                    
            name: 'To port'
        });

        markers.push({
        latlng: new google.maps.LatLng(parseFloat(getMarkerData("FromPortGPS")[0]), parseFloat(getMarkerData("FromPortGPS")[1])),
            image: '/images/fromport.png',                    
            name: 'From port'
        });
        
        var myOptions = {
            zoom: 2,
            center: markers[0].latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true
        };

        map = new google.maps.Map(document.getElementById("current-gmap"),
        myOptions);

        for (var i in markers) {
            var infowindow = new google.maps.InfoWindow({
                content: "empty"
            });

            gmarker[i] = new google.maps.Marker({
                position: markers[i].latlng,
                map: map,
                icon: markers[i].image,
                title: markers[i].name
            });

            google.maps.event.addListener(gmarker[i], 'click', function() {
                var content = "<div style=\"color:#000;\"><strong>" + this.title + "</strong><br />Position: " + this.position.toUrlValue() + "</div>";
                infowindow.setContent(content);
                infowindow.open(map, this);
            });             
        }
    }
}

function showMarker(id, action) {
    if (action == "reset") {
        map.setCenter(gmarker[0].position);
        map.setZoom(2);
    } else {
        map.setCenter(gmarker[id].position);
        map.setZoom(6);
    }
}

$(document).ready(function() {
    items = $('.menu-select li .Selected');
    var tmp = $('.menu-select li .Selected');
    if (items.length > 0) {
        eval(tmp[0].attributes.getNamedItem('onmouseover').value);
        // items.selected = false;
    } else {
        displaySub(null);
    }

    var slide = $('.slideshow p');
    if (slide.length > 0) {
        $('.slideshow br').remove();
        slide.cycle({
            fx: 'fade'
        });
        $('.slideshow').css('display', 'block');
    }

    displayProjectGMap();

    // genereer tabs
    var tabs = $("#tabs");
    if (tabs.length > 0) {
        tabs.tabs();
    }

    $('#tabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == "fragment-2") {
            displayGMap();
        }
    });

    if ($('.login-inside form .submit') != null && $('.login-inside form .submit').length > 0) {
        $('.login-inside form .submit')[0].innerHTML = $('.login-inside form .submit')[0].innerHTML + '<input type="submit" onclick="history.go(-1); return false;" value="Back">';
    }
});