﻿function initialize()
{
    var intStoreID;
    intStoreID=window.location.search.substring(1).substring(window.location.search.substring(1).indexOf('=')+1);
    if(intStoreID == "")
        intStoreID=0;
        
    PageMethods.LoadStoresInfo(intStoreID, onsucceedLoadStoresInfo,onError,this);
}

function onsucceedLoadStoresInfo(result,object,method)
{
    if (GBrowserIsCompatible()) 
    {
        //result[]:
        //0. StoreID
        //1. TxtPhones
        //2. lLatitude
        //3. Longitude
        //4. LocationImageLink
        //5. TxtAddress
        //6. TxtHours
        //7. intZoom

        var htmlString = '';
        htmlString += '<table border="0" cellpadding="2px" cellspacing="0" style="font-family:arial,helvetica,sans-serif; font-size:13px; margin-top:8px;">';
        htmlString += '<tr>';
        htmlString += '<td align="left" style="font-size:16px;"><b>John\'s Incredible Pizza Company</b></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><img alt="JIPC" src="'+result[0][4]+'" /></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><b>'+result[0][5]+'<br />'+result[0][1]+'</b></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><img alt="" src="images/transparent_1pixel.gif" /></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left">'+result[0][6]+'</td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><img alt="" src="images/transparent_1pixel.gif" /></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><a href="http://www.johnspizza.com" target="_blank">www.johnspizza.com</a></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><img alt="" src="images/transparent_1pixel.gif" /></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left">Get directions: <span id="spnStartEnd0" style="color:#000000; cursor:default; font-weight:bold; text-decoration:none;" onclick="switchSource(0);">To here</span> - <span id="spnStartEnd1" style="color:#0000ff; cursor:pointer; font-weight:normal; text-decoration:underline;" onclick="switchSource(1);" >From here</span></td>';
        htmlString += '</tr>';
        htmlString += '<tr valign="bottom">';
        htmlString += '<td align="left"><div id="divSource0" style="color:#999999; display:inline; font-size:11px;">Start address</div><div id="divSource1" style="color:#999999; display:none; font-size:11px;">End address</div></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><input id="txtTest" type="text" value="" style="width:180px;" />&nbsp;<input id="btnTest" type="button" value="Go" onclick="reLocating('+result[0][0]+');" /></td>';
        htmlString += '</tr>';
        htmlString += '<tr>';
        htmlString += '<td align="left"><img alt="" src="images/transparent_1pixel.gif" /></td>';
        htmlString += '</tr>';
        htmlString += '</table>';
        
        //Used to store the store address in case the 'ballon' is closed
        document.getElementById('hdnStoreAddress').value=result[0][5];
        
        //Define the map variable
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_HYBRID_MAP);

        //Zoom in/out+Get Directions controls
        map.addControl(new TextualZoomControl());
        
        map.setCenter(new GLatLng(result[0][2]*1,result[0][3]*1), result[0][7]*1);
        map.openInfoWindowHtml(new GLatLng(result[0][2]*1-0.00095,result[0][3]*1-0.0014), htmlString);

        //JIPC logo as an icon
        var customIcon = new GIcon();
        customIcon.image = "images/gmap.gif";
        customIcon.iconSize = new GSize(64, 64);
        customIcon.iconAnchor = new GPoint(20, 20);

        //mark using the icon
        var point = new GLatLng(result[0][2]*1-0.00105,result[0][3]*1-0.00165);
        var marker = new GMarker(point,customIcon);
        GEvent.addListener(marker, "click", function() 
            {
              map.openInfoWindowHtml(new GLatLng(result[0][2]*1-0.00095,result[0][3]*1-0.0014), htmlString);
            });
        map.addOverlay(marker);
    }
    //
    //20090318. icruz - Takes care if the Map/Direction open as a pop-up window or as a tab
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) 
    {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } 
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
    {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
    {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    if((myWidth > 750) && (myHeight > 750))
    {
        //self.resizeTo(myWidth,myHeight);
    }
    else
    {
        self.resizeTo(780,870);
    }
    //
}

/////////////////////////////////////////////////////////////////////
// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).// We define the function first
function TextualZoomControl() {}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) 
{  
    var container = document.createElement("div");  
    var zoomInDiv = document.createElement("div");  
    this.setButtonStyle_(zoomInDiv);  
    container.appendChild(zoomInDiv);  
    zoomInDiv.appendChild(document.createTextNode("Zoom In"));  
    GEvent.addDomListener(zoomInDiv, "click", function() 
        {    map.zoomIn();  });  
    
    var zoomOutDiv = document.createElement("div");  
    this.setButtonStyle_(zoomOutDiv);  
    container.appendChild(zoomOutDiv);  
    zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));  
    GEvent.addDomListener(zoomOutDiv, "click", function() 
        {    map.zoomOut();  });  
        
    //20090317.icruz - custom 'Get Directions' button
    var intStoreID;
    intStoreID=window.location.search.substring(1).substring(window.location.search.substring(1).indexOf('=')+1);
    if(intStoreID == "")
        intStoreID=0;
    
    var relocateDiv = document.createElement("div");  
    this.setButtonStyle_(relocateDiv);  
    container.appendChild(relocateDiv);  
    relocateDiv.appendChild(document.createTextNode("Get Directions"));  
    GEvent.addDomListener(relocateDiv, "click", function() 
        {    reLocating(intStoreID);  });  
    //
    
    map.getContainer().appendChild(container);  
    return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() 
{  
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) 
{  
    button.style.textDecoration = "underline";  
    button.style.color = "#0000ff";  
    button.style.backgroundColor = "white";  
    button.style.font = "small Arial";  
    button.style.border = "1px solid #000000";  
    button.style.padding = "2px";
    button.style.paddingBottom = "4px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";  
    button.style.width = "6em";  
    button.style.cursor = "pointer";
}
//
/////////////////////////////////////////////////////////////////////

function switchSource(startPoint)
{
    var i=0;
    while(document.getElementById('spnStartEnd' + i) != null)
    {
        document.getElementById('spnStartEnd'+i).style.color='#0000ff';
        document.getElementById('spnStartEnd'+i).style.cursor='pointer';
        document.getElementById('spnStartEnd'+i).style.fontWeight='normal';
        document.getElementById('spnStartEnd'+i).style.textDecoration='underline';
        document.getElementById('divSource'+i).style.display='none';
        i++;
    }
    document.getElementById('spnStartEnd'+startPoint).style.color='#000000';
    document.getElementById('spnStartEnd'+startPoint).style.cursor='default';
    document.getElementById('spnStartEnd'+startPoint).style.fontWeight='bold';
    document.getElementById('spnStartEnd'+startPoint).style.textDecoration='none';
    document.getElementById('divSource'+startPoint).style.display='inline';
}

function reLocating(storeID)
{
    var eAddress="";
    var tmp=document.getElementById('hdnStoreAddress').value.replace("<br />","");
        
    for(var i=0; i<tmp.split(" ").length; i++)
        eAddress+=tmp.split(" ")[i]+"+";
    
    if(document.getElementById('txtTest') != null)
    {
        if(trim(document.getElementById('txtTest').value) != "")
        {
            var sAddress="";
            var userAddress=trim(document.getElementById('txtTest').value);

            for(var j=0; j<userAddress.split(" ").length; j++)
                sAddress+=userAddress.split(" ")[j]+"+";
            
            if(document.getElementById('divSource0').style.display == 'inline')
                window.location="http://maps.google.com/maps?f=d&source=s_d&saddr="+sAddress+"&daddr="+eAddress;//+"&geocode=&hl=en&mra=ls&sll=37.0625,-95.677068&sspn=51.443116,79.101563&ie=UTF8&z=12";
            else
                window.location="http://maps.google.com/maps?f=d&source=s_d&saddr="+eAddress+"&daddr="+sAddress;//+"&geocode=&hl=en&mra=ls&sll=37.0625,-95.677068&sspn=51.443116,79.101563&ie=UTF8&z=12";
        }
        else
        {
            window.location="http://maps.google.com/maps?f=d&source=s_d&saddr="+eAddress;
        }
    }
    else
    {
        window.location="http://maps.google.com/maps?f=d&source=s_d&saddr="+eAddress;
    }
}

function onError(err)
{
    //alert(err._message);
}

//http://www.codestore.net/store.nsf/unid/BLOG-20060313/
function trim(string)
{
    //remove leading spaces
    while(string.substr(0,1)==" ")
        string = string.substring(1,string.length) ;
    
    //remove trailing spaces 
    while(string.substr(string.length-1,1)==" ")
        string = string.substring(0,string.length-1) ;
        //string = string.substring(0,string.length-2) ;
        //original code was cutting last character......
    
    return string;
}

