$(document).ready(function (){
    var map_holder = $('<div class="map"></div>')[0];
    $('div.pane.garages h3').before(map_holder);
    $(map_holder).attr('style', 'width:' + $(map_holder).css('width') + ';height:' + $(map_holder).css('height'));
    
    var centre = new google.maps.LatLng(54.9800, -4.3066);
    var myOptions = {
        zoom: 5,
        center: centre,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        streetViewControl: true
    };
    
    var map = new google.maps.Map(map_holder, myOptions);
    
    $.get('/api/garages/', function(response, status, request){
        var data = response.data;
        for(var i=0; i<data.length; i++){
            createGarageMarker(map, data[i])
        }
    });
    
    $('ul.regions li a').click(function(){
        if ($('ul.towns', $(this).parent()).length < 1){
            var town_list = $('<ul class="towns"></ul>').hide();
            var region = $(this).text();
            $(this).parent().append(town_list);
            $.get('/api' + $(this).attr('href'), function(response, status, request){
                if (response.data.length < 1){
                    $(town_list).append('<li>Sorry we currently do not have any garages in ' + region + '.</li>');
                }
                else {
                    for(var i=0; i<response.data.length; i++){
                        $(town_list).append('<li class="town"><a href="' + response.data[i].url + '">' + response.data[i].name + '</a></li>');
                    }
                }
                showTowns(town_list);
            });
        }
        else {
            if ($('ul.towns', $(this).parent()).is(':visible')){
                hideTowns($('ul.towns', $(this).parent()));
            }
            else {
                showTowns($('ul.towns', $(this).parent()));
            }
        }
        return false;
    });
});

function showTowns(list){
    $(list).addClass('animating');
    $(list).slideDown(800, finishedAnimation);
    moveArrow($('span', $(list).parent()), -15, -75)
}

function hideTowns(list){
    $(list).addClass('animating');
    $(list).slideUp(800, finishedAnimation);
    moveArrow($('span', $(list).parent()), 15, 0)
}

function moveArrow(arrow, step, limit){
    arrow_pos = parseInt($(arrow).css('background-position').split(' ')[0]) + step;
    $(arrow).css('background-position', arrow_pos + 'px center');
    if (arrow_pos != limit){
        setTimeout(function(){moveArrow(arrow, step, limit)}, 100);
    }
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150,300)
});

function createGarageMarker(map, garage){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(garage.latitude, garage.longitude),
        map: map,
        icon: MEDIA_URL + '/images/map_marker.png',
        title: garage.name
    })
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(formInfoWindow(garage)); 
        infowindow.open(map, marker);
    });
}

function formInfoWindow(garage){
    var content = '<h3><a href="' + garage.url + '">' + garage.name + '</a></h3>';
    return '<div style="width:300px">' + content + '</div>';
}

function finishedAnimation(){
    $(this).toggleClass('animating');
}