var nMapOffsetLeft = 0;
var bTestMode = false;
var cImgId = 'map';
var oImg = $("#" + cImgId);
var oContainer = oImg.parent();


function InitMap() {
    // set offset

    if (typeof (oItems) == 'undefined') {
        
        return;
    }
    
    // center img
    SetOffsetLeft();
    $("#" + cImgId).css('left', nMapOffsetLeft);

    

    // go through array
    if (!bTestMode) {
        
        for (var i = 0; i < oItems.length; i++) {
            // create marker
            // place marker on map
            // add events to marker


            // NOT WORKING ON OPERA and SAFARI

            // onmouseout="JavaScript:void(HideMapItem(' + oItems[i].id + '))"


            var cHtml = '<a id="mapCity' + oItems[i].id + '" class="mapCity" href="#city' + oItems[i].id + '" style="top:' + oItems[i].y + 'px;left:' + (nMapOffsetLeft + oItems[i].x) + 'px;"  href="JavaScript:void(0)" onmouseover="JavaScript:void(ShowMapItem(' + oItems[i].id + '))"  ><span>' + oItems[i].label + '</span></a>';
            if (oItems[i].position == 'left') {
                cHtml = '<a id="mapCity' + oItems[i].id + '" class="mapCity" href="#city' + oItems[i].id + '" style="background-position:right middle;top:' + oItems[i].y + 'px;left:' + (nMapOffsetLeft + oItems[i].x) + 'px;"  href="JavaScript:void(0)" onmouseover="JavaScript:void(ShowMapItem(' + oItems[i].id + '))"  ><span class="right">&nbsp;</span><div class="outside">' + oItems[i].label + '</div></a>';
            }
            
            
            FixItemOffset(oItems[i].objects);
            //alert(oItems[i].objects[0].length);

            oContainer.append(cHtml);
            
            oImg.bind('click', function(e) {
                HideAllItems();
            });

        }
    } else {
        var oPosObj = $('#dPosition').show();
        oImg.css('border', '1px solid red');
        oImg.bind('click', function(e) {
            var nLeft = e.pageX - (oContainer.position().left + oImg.position().left + 3); // 3 is offset
            var nTop = e.pageY - (oContainer.position().top + oImg.position().top + 3); // 3 is offset;

            oContainer.append('<div style="position:absolute;top:' + nTop + 'px;left:' + (nLeft + nMapOffsetLeft) + 'px;z-index:500;border:1px solid red;width:5px;height:5px;background-color:green;overflow:hidden;">&nbsp;</div>');

            oPosObj.html('<h1>X: ' + nLeft + ' px</h1><h1>Y: ' + nTop + ' px</h1>');
        });
    }



}
function FixItemOffset(items) {
    for (var i = 0; i < items.length; i++) {
        var oObj = $('#' + items[i]);
        var nLeft = parseInt(oObj.attr('x'));
        var nTop = parseInt(oObj.attr('y'));
        oObj.css('left', nLeft + nMapOffsetLeft).css('top', nTop);
    }
}
function ShowMapItem(nMarkerId) {
    HideAllItems();
    ToggleMapItem(true, nMarkerId);
}
function HideMapItem(nMarkerId) {
    ToggleMapItem(false, nMarkerId);
}
function HideAllItems() {
    for (var i = 0; i < oItems.length; i++) {
        for (var j = 0; j < oItems[i].objects.length; j++) {
            $('#' + oItems[i].objects[j]).hide();
        }
    }
}
function ToggleMapItem(bShow, nMarkerId) {
    for (var i = 0; i < oItems.length; i++) {
        if (oItems[i].id == nMarkerId) {
            // SHOW ITEM
            for (var j = 0; j < oItems[i].objects.length; j++) {
                if (bShow) {
                    $('#' + oItems[i].objects[j]).show();
                } else {
                    $('#' + oItems[i].objects[j]).hide();
                }
            }
            break;
        }
    }
}


function SetOffsetLeft() {
    var nParentWidth = oContainer.width();
    
    var nImageWidth = oImg.width();
    nMapOffsetLeft = (nParentWidth - nImageWidth) / 2;

}

function ResizeMap() {
    SetOffsetLeft();
    oImg.css('left', nMapOffsetLeft);
    for (var i = 0; i < oItems.length; i++) {
        var cHtml = '<a id="mapCity' + oItems[i].id + '" class="mapCity" style="top:' + oItems[i].y + 'px;left:' + (nMapOffsetLeft + oItems[i].x) + 'px;"  href="JavaScript:void(0)" onmouseover="JavaScript:void(ShowMapItem(' + oItems[i].id + '))"  onmouseout="JavaScript:void(HideMapItem(' + oItems[i].id + '))">' + oItems[i].label + '</a>';
        $('#mapCity' + oItems[i].id).css('top', oItems[i].y + 'px').css('left', (nMapOffsetLeft + oItems[i].x) + 'px');
        FixItemOffset(oItems[i].objects);
    }
}


$(window).load(function() {
    InitMap();
});

$(window).resize(function() {
    ResizeMap();
});