﻿function DrivePanel() {
    ///<summary>Object holding methods used when creating the control panel for the animated drive.</summary>
   
}

///<summary>Object inheriting from the GControl object</summary>
DrivePanel.prototype = new GControl();

///<summary>Base folder for the icons of this object</summary>
DrivePanel.prototype.imageFolder = '/images/icons/routeplanner/';

DrivePanel.prototype.carAnimation;

DrivePanel.prototype.initialize = function(map) {
    ///<summary>Object used when initializing the object</summary>
    ///<param name="map">Google Map object</param>

    this.carAnimation = new CarAnimation();
    this.carAnimation.init(map);

    var container = document.createElement('div');
    container.style.border = 'solid 1px #cccccc';
    container.style.background = 'white';
    container.style.color = '#555555';
    container.style.textAlign = 'center';
    container.style.width = '100px';
    container.style.height = '30px';
    container.style.padding = '5px';

    container.appendChild(document.createTextNode('Animert kjøretur'));

    var buttonContainer = document.createElement('div');
    buttonContainer.style.padding = '2px';

    var _self = this;
    var play = this._controlButton('control_play_blue.png', 'control_play.png', 'Start kjøreturen', function() {
        _self.carAnimation.start();
    });

    var stop = this._controlButton('control_stop_blue.png', 'control_stop.png', 'Stopp kjøreturen', function() {
        _self.carAnimation.stop()
    });

    var pause = this._controlButton('control_pause_blue.png', 'control_pause.png', 'Ta en pause..', function() {
        _self.carAnimation.pause()
    });

    buttonContainer.appendChild(play);
    buttonContainer.appendChild(pause);
    buttonContainer.appendChild(stop);
    container.appendChild(buttonContainer);
    map.getContainer().appendChild(container);
    return container;
}

DrivePanel.prototype._controlButton = function(activeIcon, inactiveIcon, tooltip, clickFn) {
    /// <summary>Method used when creating the control panel buttons</summary>
    /// <param name="activeIcon">Image to display when the mouse moves over the button.</param>
    /// <param name="inactiveIcon">Image to display when the mouse moves away from the button.</param>
    /// <param name="tooltip">Alt text of the image that represents the button</param>
    /// <param name="clickFn">Function triggered when the user clicks the button</param>
    
    var btn = document.createElement('img');
    btn.style.cursor = 'hand';
    btn.style.cursor = 'pointer';

    btn.src = this.imageFolder + inactiveIcon;
    btn.alt = tooltip;

    var panel = this;
    GEvent.addDomListener(btn, 'click', clickFn);
    GEvent.addDomListener(btn, 'mouseover', function() {
        this.src = panel.imageFolder + activeIcon;
    });
    GEvent.addDomListener(btn, 'mouseout', function() {
        this.src = panel.imageFolder + inactiveIcon;
    });
    return btn;
}

DrivePanel.prototype.getDefaultPosition = function() {
    /// <summary>The controls default position relative to the Google Map</summary>
    return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 20));
}
