var onPageLoad = function ()
{        
    var $form = $('#calculate-distance');    
        $form.$tbody = $form.find('#cities > table > tbody');
    
    $form.refresh = function () 
    {
        this.find('td.point').each(function (i) {
            this.innerHTML = Points[i];
        })
        
        this.find('input.city').each(function (i) {
            $(this).attr('name', 'city['+ i +'][name]');
            $(this.parentNode).find('select').attr('name', 'city['+ i +'][geoid]');
        })
        
        if ($form.$tbody.find('> tr').length > 2)
            $form.find('span.remove-city').css('visibility', 'visible');
        else        
            $form.find('span.remove-city').css('visibility', 'hidden');                    
    }   
    
    $form.refresh();
    $form.find('select').change(function () {$form[0].submit()})
    $form.find('input.city').change(function () {$(this.parentNode).find('select, .locality').remove()})
    
    $('input.city').autocomplete(acUrl, acOptions);         
    
    $('span.remove-city').click(onRemoveCity);
    function onRemoveCity ()
    {
        $(this.parentNode.parentNode).remove();
        $form.refresh();
    }
    
    /*
     * City add
     */        
    $('#add-city').click(onAddCity);  
     
    function onAddCity ()
    {      
        if ($form.$tbody.find('> tr').length >= Points.length) return;
        
        var $tr = $form.$tbody.find('> tr:last').clone();
        $tr.find('input.city').val('').autocomplete(acUrl, acOptions);
        $tr.find('select, .locality').remove();
        $tr.find('span.remove-city').click(onRemoveCity);
        $tr.appendTo( $form.$tbody );
        
        $form.refresh();
    }
    
    if ($form.$tbody.find('> tr').length == 1) $('#add-city').trigger('click');
    
    /*
     * Gmaps
     */
     
    if (Pairs.length) showMap ();
    
    /*
     * Tabs
     */
    var $tabs = $('ul.ui-tabs-nav'),
        $rels = $('.km, .mi');
    
    $tabs.find('a').click(function () 
    {
        $tabs.find('li').removeClass('ui-tabs-selected');
        $(this.parentNode).addClass('ui-tabs-selected');
        
        var rel = $(this).attr('rel');
        
        $.cookie('distance-tab', rel);        
        $rels.hide();
        $('.' + rel).css('display', 'inline');
    })
}
$(onPageLoad);

function showMap ()
{    
    /*
     * Gmap create
     */
    var mapOptions = {
    	zoom: 8,
    	center: new google.maps.LatLng (Pairs[0].from.lat, Pairs[0].from.lng),
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
	var $map = $('#distance-map'),
	    map = new google.maps.Map($map[0], mapOptions);
	
	/*
	 * Markers and arc
	 */
    var markerFrom = new google.maps.Marker({
        map: map, 
        position: new google.maps.LatLng (Pairs[0].from.lat, Pairs[0].from.lng),
        title: Points[0] + ': ' + Pairs[0].from.name
    });
    
	//Fit map bounds	
	var bounds = new google.maps.LatLngBounds(
	    markerFrom.getPosition(), 
	    markerFrom.getPosition()
	);			
	map.fitBounds(bounds);
	
	//Elevation API	
	var elevator = new google.maps.ElevationService();        
    
    for (var i = 0; i < Pairs.length; i++)
    {
        var markerTo = new google.maps.Marker({
            map: map, 
            position: new google.maps.LatLng (Pairs[i].to.lat, Pairs[i].to.lng),
            title: Points[i+1] + ': ' + Pairs[i].to.name
        }); 
        
        bounds.union(
            new google.maps.LatLngBounds(
                markerTo.getPosition(),
                markerTo.getPosition()
            )
        );        
        
        /*
         * Elevation
         */
        var p1 = new google.maps.LatLng (Pairs[i].from.lat, Pairs[i].from.lng),
            p2 = new google.maps.LatLng (Pairs[i].to.lat, Pairs[i].to.lng);
        
        pathRequest = {path: [p1, p2], samples: 100};        
        try_drawElevation (pathRequest);
    }    
    
    map.fitBounds(bounds);
    
    function try_drawElevation (pathRequest)
    {
        elevator.getElevationAlongPath(pathRequest, drawElevation);
        
        function drawElevation (results, status)
        {
            if (status == google.maps.ElevationStatus.OK) 
            {
                elevations = results;

                /*
                 * Draw arc
                 */
                var elevationPath = [];

                for (var i = 0; i < results.length; i++) 
                {
                    elevationPath.push(elevations[i].location);
                    bounds.union(
                        new google.maps.LatLngBounds(
                            elevations[i].location, 
                            elevations[i].location
                        )
                    );
                }

                map.fitBounds(bounds);

                var pathOptions = 
                {
                    path: elevationPath,
                    strokeColor: '#FF0000',
                    opacity: 1.0,
                    map: map
                }

                var polyline = new google.maps.Polyline (pathOptions);        

                /*
                 * Draw chart
                 *   
                if (google.visualization)
                {
                    data = new google.visualization.DataTable();                     
                    data.addColumn('string', 'Sample');
                    data.addColumn('number', 'Elevation');

                    for (var i = 0; i < results.length; i++)
                        data.addRow(['', elevations[i].elevation]);

                    if (chart) chart.drawData(data);
                }
                 */
            }
            else
            {
                setTimeout(
                    function () {
                        elevator.getElevationAlongPath(pathRequest, drawElevation)
                    }, 
                    1000
                )
            }
        }
    }
        
}

var Points = Language == 'ru' 
    ? ['А','Б','В','Г','Д','Е','Ж','З','И','К','Л','М','Н','О','П','Р','С','Т']
    : ['A','B','C','D','E','F','G','H','I','J','K','L','M','O','P','Q','R','S'];

/*
 * Autocomplete options
 */
var acOptions = 
{
    selectFirst:false,
    delay:5,
    autoFill:false,
    dataType:'json',
    parse: function (data) 
    {
        var parsed = [];
        for (i = 0; i != data.suggestions.length; i++)
        {
            parsed.push
            ({
                data: data.suggestions[i],
                value: data.suggestions[i],
                result:data.suggestions[i]
            });
        }
        return parsed;
    },
    formatItem  : function (data) { return data },
    formatMatch : function (data) { return data.value }
}
var acUrl = '/place/api/suggest';