/**
 * @author michel.ypma
 */


var map = new Object();
var cMark;
var baseCountry;
var baseHref = ''

function MyMapBox( _country, _translation )
{
    $("#cntheader").before('<div class="popupover"></div><div id="cntpopup"><div class="popupbox1"><div class="popupcontent"><h1>'+_translation.title+'</h1><ul class="close"><li><a href="#" title="close"><span class="dispnone">close</span></a></li></ul><div class="cb"></div><div class="box1"><div class="boxcontent"><h2 class="type3">'+_translation.zipcodeHelp+'</h2><form method="post" action=""><fieldset class="fl"><input type="text" name="option1" value="1111 AA" class="type2" id="location"/></fieldset><fieldset class="buttons fr"><input type="button" value="'+_translation.sendLabel+' &gt;" class="button4 " id="findStores" /></fieldset><div class="cb"></div><p>'+_translation.zipcodeExample+'</p><div id="MyBox_map"></div><p class="type1"><small>'+_translation.footerText+'</small></p></form></div><div class="boxbottom"></div></div><div class="col4"><ul class="nav1" id="selectedMarker"><li></li></ul><div class="col15"><ul class="nav1"></ul></div></div><div class="cb"></div></div><div class="popupbottom"></div></div></div>');

    $("#cntpopup").css( 'display', 'none' );
    $("div.popupover").css( 'display', 'none' );
    $("div.popupover").css( 'opacity', 0 );

    $('#location').parent().parent().submit( function() {
        MyMapBoxViewArea( $("#location").attr('value') );
        return false;
    } );

    baseCountry = _country;
    baseHref = 'http://'+window.location.host+'/';

    MyMapBoxInit();
}


function MyMapBoxInit()
{
    $("#location").focus( function() {
        if ( $(this).val() == '1111 AA' )
            $(this).val('');
    } );
    $("#location").blur( function() {
        if ( $(this).val() == '' )
            $(this).val('1111 AA');
    } );
    $("div.popupover").click( function() {
        MyMapBoxClose();
        return false;
    });
    $("ul.close li a").click( function() {
        MyMapBoxClose();
        return false;
    });
    $("#findStores").click( function() {
        if ( $("#location").attr('value') != '' )
        MyMapBoxViewArea( $("#location").attr('value') );
    });
    MyMapBoxStyle();
}

function MyMapBoxStyle ()
{
    //Map div
    $("#MyBox_map").css( {
        width : 440,
        height : 300
    } );
}

function MyMapBoxOpen()
{
    MyMapBoxDisplay();
}

function MyMapBoxClose ()
{
    MyMapBoxHide( MyMapBoxRemove );
}

function MyMapBoxRemove()
{
    $('#cntpopup').css( 'display', 'none' );
    $('div.popupover').css( 'display', 'none' );
}

function MyMapBoxDisplay()
{
    $("#cntpopup").css( 'display', 'block' );
    $("#cntpopup").css( 'opacity', 'hide' );
    $("div.popupover").css( 'display', 'block' );
    $("div.popupover").css( 'opacity', 0 );

    if ( $('#MyBox_map div').length == 0 )
        MyMapBoxLoad();

    $('div.popupover').animate( {
        opacity: .8
    },
    3000,
    null,
    null );
    $('#cntpopup').animate( { opacity: 'show' }, 300 );
}

function MyMapBoxHide( _cbFunc )
{
    $('#cntpopup').animate( {
        opacity: 'hide'
    },
    300,
    null,
    function() {
        $('div.popupover').animate( {
            opacity: 'hide'
        },
        300,
        null,
        function () {
            _cbFunc();
        } );
    } );
}

function MyMapBoxLoad ()
{
    map = new GMap2(document.getElementById("MyBox_map"));
    if (GBrowserIsCompatible()) {
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(
            baseCountry,
            function(point) {
                if (!point) {
                    alert( baseCountry + " not found" );
                } else {
                    map.setCenter( point, 5 );
                }
                map.addControl(new GLargeMapControl());
            }
        )

    }
}

function MyMapBoxLoadMarkers ( point ) {
    GDownloadUrl( baseHref+'store/locator.php?lat='+point.y+'&lng='+point.x, MyMapBoxOnMarkersLoaded );
}

function MyMapBoxOnMarkersLoaded( data, responseCode )
{
    $('ul.nav1').html('');

    var xml = GXml.parse(data);
    var xmlMarkers = xml.documentElement.getElementsByTagName("marker");
    var markers = new Array();

    var defaultHtml = '<li class="active"><a href="#"><span class="nav1content"><br /><br /><br /><br /><br /></span></a></li>';
    $('#selectedMarker').html(defaultHtml);

    for (var i = 0; i < xmlMarkers.length; i++) {
        var cMark = new GMarker(
                    new GLatLng(
                        parseFloat( xmlMarkers[i].getAttribute("lat") ),
                        parseFloat( xmlMarkers[i].getAttribute("lng") )
                    )
                );
        var cPoint = cMark.getPoint();
        var obj = { marker : cMark,
                name    : xmlMarkers[i].getAttribute('name'),
                address : xmlMarkers[i].getAttribute('address'),
                city    : xmlMarkers[i].getAttribute('city'),
                zipcode : xmlMarkers[i].getAttribute('zipcode'),
                website : xmlMarkers[i].getAttribute('website')
            };



        markers.push( obj );

        map.addOverlay( cMark );

        var cSideHtml = '<li id="marker'+i+'"><a href="#'+i+'" title="'+obj.name+'"><span class="nav1content"><strong>'+(i+1)+'. '+obj.name+'</strong><br />'+obj.address+'<br />'+obj.zipcode+' '+obj.city+'<br />'+obj.website+'</span></a></li>';
        $('div.col15 ul.nav1').append(cSideHtml);

        $('#marker'+i).click( function() {
            var c = $(this).attr('id').split('marker').join('');
            map.panTo( markers[c].marker.getPoint(), 11 );
            markers[c].marker.openInfoWindow( '<strong>'+ markers[c].name +'</strong><br /><br />'+ markers[c].address +'<br />'+ markers[c].zipcode +' '+ markers[c].city +'<br />'+ markers[c].website );

            $('#selectedMarker li').html( $(this).html() );
            $('div.col15 ul.nav1 li').css('display', 'block');
            $(this).css('display','none');
        });
    }
}

function MyMapBoxViewArea ( _locationStr )
{
    if (GBrowserIsCompatible()) {
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(
            _locationStr /*+ ' ' + baseCountry*/,
            function(point) {
                if (!point) {
                    $('#location').css('color','#f00');
                } else {
                    $('#location').css('color','');
                    MyMapBoxLoadMarkers( point );
                    map.setCenter( point, 11 );
                }
            }
        )

    }
}