/**
 * @author Radu Almasan
 * @version 0.1
 */



/** An InfoBox is like an info window, but it displays  under the marker, opens
 * quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content, offsetVertical,
 * offsetHorizontal, className, height, width
 */
google.maps.InfoBox = function InfoBox(opts) {
    opts = opts || {};
    if (opts.latlng) this.latlng_ = opts.latlng;
    if (opts.map) this.map_ = opts.map;
    this.type_ = opts.type || 1;

    this.offsetVertical_ = 0;
    this.offsetHorizontal_ = 0;

    if (this.map_ && this.latlng_) this.open(this.map_, this.latlng_);
}



/**
 * InfoBox extends GOverlay class from the Google Maps API
 */
google.maps.InfoBox.prototype = new google.maps.OverlayView();



/**
 *
 */
google.maps.InfoBox.prototype.onAdd = function() {
    smallDiv = document.createElement("div");
    jQuery(smallDiv).addClass('infobox small');

    divc = document.createElement('div');
    jQuery(divc).addClass('content');
    smallDiv.appendChild(divc);

    divr = document.createElement('div');
    jQuery(divr).addClass('end');
    smallDiv.appendChild(divr);

    // On click, open a large box with more details
    jQuery(smallDiv).click(function() {
        roportal.harta.map.InfoBox.open(this.map_, this.maker_, 'click');
    });

    this.smallDiv_ = smallDiv;

    largeDiv = document.createElement('div');
    jQuery(largeDiv).addClass('infobox large');

    divt = document.createElement('div');
    jQuery(divt).addClass('top');
    largeDiv.appendChild(divt);

    divtr = document.createElement('div');
    jQuery(divtr).addClass('topr');
    largeDiv.appendChild(divtr);

    divr = document.createElement('div');
    jQuery(divr).addClass('r');
    largeDiv.appendChild(divr);

    divbr = document.createElement('div');
    jQuery(divbr).addClass('bottomr');
    largeDiv.appendChild(divbr);

    divb = document.createElement('div');
    jQuery(divb).addClass('bottom');
    largeDiv.appendChild(divb);

    divc = document.createElement('div')
    jQuery(divc).addClass('content');
    largeDiv.appendChild(divc);

    this.largeDiv_ = largeDiv;
}



/**
 * Redraw the Bar based on the current projection and zoom level
 */
google.maps.InfoBox.prototype.draw = function() {
    this.onRemove();

    switch (this.event_) {
        case 'mouseover':
            if (this.smallDiv_) {
                this.div_ = this.smallDiv_;
                // Add label and set the type (color)
                jQuery(this.div_).children('.content').html(this.label_ || '').css('background', "url(" + temppath + "img/mark000" + this.type_ + "l1.png) repeat-x");
                jQuery(this.div_).children('.end').css('background', "url(" + temppath + "img/mark000" + this.type_ + "l2.png) no-repeat");
            } else return;
            break;
        case 'click':
            if (this.largeDiv_) {
                this.div_ = this.largeDiv_;
                jQuery(this.div_).children('.content').html(this.content_ || '').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b2.png)");;
                jQuery(this.div_).children('.top').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b1.png) repeat-x");
                jQuery(this.div_).children('.topr').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b.png) -10px");
                jQuery(this.div_).children('.r').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b.png) -35px repeat-y");
                jQuery(this.div_).children('.bottomr').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b.png) -25px");
                jQuery(this.div_).children('.bottom').css('background', "url(" + temppath + "img/mark000" + this.type_ + "b1.png) 0px -5px repeat-x");
            } else return;
            break;
    }

    if ( ! this.div_) return;

    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div_);

    // Calculate the DIV coordinates of two opposite corners of our bounds to
    // get the size and position of our Bar
    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if ( ! pixPosition) return;

    // Now position our DIV based on the DIV coordinates of our bounds
    this.div_.style.left = (pixPosition.x) + "px";
    this.div_.style.top = (pixPosition.y - 28) + "px";
};



/**
 *
 */
google.maps.InfoBox.prototype.onRemove = function() {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
}



/**
 * Sets the position where the box will appear
 */
google.maps.InfoBox.prototype.setPosition = function(latlng) {
    latlng = latlng || {};
    if (typeof latlng.lat != 'function' || typeof latlng.lng != 'function')
        throw('Object sent is not of the correct format. Instance of google.maps.LatLng needed.');
    else
        this.latlng_ = latlng;
}



/**
 *
 */
google.maps.InfoBox.prototype.setLabel = function(content) {
    this.label_ = label;
}



/**
 *  latlng, type, content
 */
google.maps.InfoBox.prototype.open = function(map, marker, event) {
    if (map) this.map_ = map;
    if (marker) {
        this.maker_ = marker;
        this.setPosition(marker.getPosition());
        if (marker.type && marker.type >= 0 && marker.type <= 2) this.type_ = marker.type;
        if (marker.label) this.label_ = marker.label;
        if (marker.contentString) this.content_ = marker.contentString;
    }
    if (event) this.event_ = event;

    if ( ! this.map_ || ! this.latlng_) {
        if ( ! this.map_) throw('No map given');
        if ( ! this.latlng_) throw('No position given.');
        return;
    }

    this.setMap(this.map_);
}