// Generic Value GControl by Jiri Prochazka (based on XSlider of Mike Williams)

// extend JQuery by slider function
jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'}, 500);
    });
  },
  slideLeft: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'}, 500);
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = jQuery(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});

//******************************************************************************
// Slider
//******************************************************************************
// Create a Custom GControl
function SliderControl(max, value, title) {
    this.max = max;
    this.initValue = value;//initial slider position
    this.title = title;//title
}

SliderControl.prototype = new GControl();

// This function positions the slider to match the specified value
SliderControl.prototype.setSlider = function(value) {
    var _value = this.max - value;
    if (_value >= 0 && _value <= this.max) {
        this.slide.top = _value;
        this.knob.style.top = _value + "px";
    }
}

// Return actual value of slider
SliderControl.prototype.getValue = function() {
    var _val = this.max - this.slide.top;
    return (!_val)? 0 : _val;
}

// This function reads the slider value and sets numeric value to slider
SliderControl.prototype.setValue = function() {
    var o = this.getValue();
    if (o >= 0 && o <= this.max) {
        //o = o + 1;
        var num1 = this.num1;
        var num2 = this.num2;
        if (o < 10) {
            num1.src = 'images/numbers/noblank.png';
            num1.style.width = '0px';
            num2.src = 'images/numbers/no' + o + '.png';
            num2.style.paddingLeft = "4px";
        } else {
            var n = Math.floor(o / 10);
            num1.src = 'images/numbers/no' + n + '.png';
            num1.style.width = '8px';
            num2.src = 'images/numbers/no' + (o - (n * 10)) + '.png';
            num2.style.paddingLeft = "0px";
        }

        GEvent.trigger(this, "onchange");
    }
}


// == This gets called by the API when addControl(new XSlider()) is used ==
SliderControl.prototype.initialize = function(map) {

    // obtain Function Closure on a reference to "this"
    var that=this;
    // store a reference to the map so that we can make calls on it
    this.map = map;

    // Is this MSIE, if so we need to use AlphaImageLoader
    var agent = navigator.userAgent.toLowerCase();
    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){this.ie = true} else {this.ie = false}

    // create the background graphic as a <div> containing an image
    var container = document.createElement("div");
    container.style.width="20px";
    container.style.height="75px";
    container.style.background = "url(script/images/slidebg.png)";
    container.style.backgroundRepeat = "no-repeat";
    container.style.backgroundPosition = "4px 24px";

    // create the knob as a GDraggableObject
    // Handle transparent PNG files in MSIE
    if (this.ie) {
      var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='script/images/slider.png', sizingMethod='scale');";
      this.knob = document.createElement("div");
      this.knob.style.height="25px";
      this.knob.style.width="25px";
      this.knob.style.filter=loader;
    } else {
      this.knob = document.createElement("div");
      this.knob.style.background = "url(script/images/slider.png)";
      this.knob.style.height = "25px";
      this.knob.style.width = "25px";
    }

    if (this.title) {
        this.knob.title = this.title;
    }

    var num1 = document.createElement("img");
    //num1.id = "_num1";
    num1.src = ""
    num1.style.width="8px";
    num1.style.height="10px";
    num1.style.paddingTop = "6px";
    num1.style.paddingLeft = "5px";
    this.num1 = num1;

    var num2 = document.createElement("img");
    //num2.id = "_num2";
    num2.src = "images/numbers/no0.png"
    num2.style.width="8px";
    num2.style.height="10px";
    num2.style.paddingTop = "6px";
    num2.style.paddingLeft = "4px";
    this.num2 = num2;

    this.knob.appendChild(this.num1);
    this.knob.appendChild(this.num2);

    container.appendChild(this.knob);
    this.slide=new GDraggableObject(this.knob, {container:container});
    this.slide.setDraggableCursor('pointer');
    this.slide.setDraggingCursor('pointer');
    this.container = container;

    // attach the control to the map
    map.getContainer().appendChild(container);

    // init slider value
    this.setSlider(this.initValue);
    this.setValue();

    // Listen for the slider being draged
    GEvent.addListener(this.slide, "drag", function() {that.setValue()});
    // Listen for the slider being clicked, increase value by one
    GEvent.addListener(this.slide, "click", function() {that.setSlider(that.getValue() + 1); that.setValue();});

    return container;
}

SliderControl.prototype.setDefaultPosition = function(anchor, x, y) {
    this.position = new GControlPosition(anchor, new GSize(x, y));
}

// Set the default position for the control on map under zoom controls
SliderControl.prototype.getDefaultPosition = function() {
    return (this.position)? this.position : new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(24, 45));
}

//******************************************************************************
// Tree holder
//******************************************************************************
function ComponentContainer(id, containerid, roottitle, width, height, locale, resourceShow, resourceHide, togglerSide, x, y) {
    this.id = id;
    this.containerid = containerid;
    this.roottitle = roottitle;
    this.width = width;
    this.height = height;
    this.locale = locale;
    this.resourceShow = resourceShow;
    this.resourceHide = resourceHide;
    this.togglerSide = togglerSide;
    this.cookieName = "cookie" + id;
    this.x = x;
    this.y = y;
}

ComponentContainer.prototype = new GControl();

ComponentContainer.prototype.toggle = function() {
    if (this.toggleicon.src.indexOf('open') < 0) {
        this.toggleicon.src = 'script/images/open.png';
        this.toggleicon.alt = this.resourceShow;
        this.toggleicon.title = this.resourceShow;
        this.toggler.title = this.resourceShow;
        $("#" + this.id + "_togglewrapper").hide();
    } else {
        this.toggleicon.src = 'script/images/close.png';
        this.toggleicon.alt = this.resourceHide;
        this.toggleicon.title = this.resourceHide;
        this.toggler.title = this.resourceHide;
        $("#" + this.id + "_togglewrapper").show();
    }

    this.setCookie();
}

ComponentContainer.prototype.setCookie = function() {
    $.cookie(this.cookieName, this.toggleicon.src.indexOf('open') < 0, {expires: 365});
}

ComponentContainer.prototype.getCookie = function() {
    var value = $.cookie(this.cookieName);
    if (value) {
        return value;
    }
}

ComponentContainer.prototype.initialize = function(map) {

    // obtain Function Closure on a reference to "this"
    var that=this;
    // store a reference to the map so that we can make calls on it
    this.map = map;

    var hidden = (this.getCookie() == "false");

    // Is this MSIE, if so we need to use AlphaImageLoader
    var agent = navigator.userAgent.toLowerCase();
    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){this.ie = true} else {this.ie = false}

    container = document.createElement("div");
    container.id = this.id;
    container.style.background = "#eeeeee";
    container.style.height = this.height + "px";
    container.style.borderTop = "1px solid #666";
    container.style.borderBottom = "1px solid #666";
    container.style.borderLeft = "1px solid #666";
    if (this.ie) {
        container.style.styleFloat = "left";
    } else {
        container.style.cssFloat = "left";
    }
    container.style.clear = "both";

    toggler = document.createElement("div");
    toggler.id = this.id + "_toggler";
    toggler.title = (hidden)? this.resourceShow : this.resourceHide;
    toggler.style.width = "24px";
    toggler.style.height = "100%";
    toggler.style.cursor = "pointer";
    toggler.style.background = "url(script/images/bgtoggler.png)";
    toggler.style.backgroundRepeat = "repeat-x";
    if (this.ie) {
        toggler.style.styleFloat = this.togglerSide;
    } else {
        toggler.style.cssFloat = this.togglerSide;
    }

    toggleicon = document.createElement("img");
    toggleicon.id = this.id + "_toggleicon";
    toggleicon.src = "script/images/" + ((hidden)? "open" : "close") + ".png";
    toggleicon.alt = (hidden)? this.resourceShow : this.resourceHide;
    toggleicon.title = (hidden)? this.resourceShow : this.resourceHide;
    toggleicon.style.paddingLeft = "5px";
    toggleicon.style.paddingTop = "5px";

    toggleimage = document.createElement("img");
    toggleimage.src = "script/images/" + this.roottitle + "_" + this.locale + ".png";
    toggleimage.style.paddingTop = "10px";
    toggleimage.style.paddingLeft = "2px";

    toggler.appendChild(toggleicon);
    toggler.appendChild(toggleimage);

    container.appendChild(toggler);

    togglewrapper = document.createElement("div");
    togglewrapper.id = this.id + "_togglewrapper";
    if (this.ie) {
        togglewrapper.style.styleFloat = "left";
    } else {
        togglewrapper.style.cssFloat = "left";
    }
    toggle = document.createElement("div");
    toggle.id = this.id + "_toggle";

    contentContainer = document.createElement("div");
    contentContainer.id = this.containerid;
    contentContainer.style.width = this.width + "px";
    contentContainer.style.height = (this.height - 10) + "px";

    toggle.appendChild(contentContainer);
    togglewrapper.appendChild(toggle);
    container.appendChild(togglewrapper);

    this.toggleicon = toggleicon;
    this.toggler = toggler;
    this.contentContainer = contentContainer;
    this.container = container;

    // attach the control to the map
    map.getContainer().appendChild(container);

    if (hidden) {
        $("#" + this.id + "_togglewrapper").hide();
    }

    GEvent.addDomListener(this.toggler, "click", function() { that.toggle() });

    return container;
}

ComponentContainer.prototype.getContainer = function() {
    return this.contentContainer;
}

ComponentContainer.prototype.addControl = function(_control) {
    _control.initialize(this);
    _control.initializePosition();
}

// Set the default position for the control on map under zoom controls
ComponentContainer.prototype.getDefaultPosition = function() {
    return new GControlPosition(this.togglerSide == "right"? G_ANCHOR_BOTTOM_RIGHT : G_ANCHOR_BOTTOM_LEFT, new GSize(this.x, this.y));
}

//******************************************************************************
// Panel
//******************************************************************************
// Create a Custom GControl
function Panel(title, width, height, x, y, activeControl, active) {
    this.title = title;
    this.width = width;
    this.height = height;
	this.x = x;
	this.y = y;
	this.activeControl = activeControl;
	this.active = active;
}

Panel.prototype = new GControl();

Panel.prototype.initialize = function(parent) {

    var container = document.createElement("div");
    container.style.width = this.width + "px";
    container.style.height = this.height + "px";
    container.style.border = "1px solid #777";
    container.style.backgroundColor = "#ddd";
    container.style.textAlign = "center";
    container.style.padding = "2px";

    var topcontainer = document.createElement("div");
    //topcontainer.style.border = "1px solid gray";
    topcontainer.style.padding = "2px";

    var text = document.createElement("div");
    text.innerHTML = this.title;
    text.style.fontSize = "9px";
    text.style.fontWeight = "bold";

    var knobd = document.createElement("div");
    knobd.style.width = "19px";
    knobd.style.height = "19px";
    knobd.style.paddingLeft = (this.width - 19) / 2 + "px";

    this.knob = document.createElement("img");
    if (this.activeControl) {
        this.knob.src = "script/images/knob.png"
        this.knob.style.width="19px";
        this.knob.style.height="19px";
        this.knob.style.display = "block";
        this.knob.style.paddingTop = "1px";
        //this.knob.style.paddingLeft = (this.width - 19) / 2 + "px";
        this.knob.style.cursor = "pointer";

        knobd.appendChild(this.knob);
    }

    topcontainer.appendChild(text);
    topcontainer.appendChild(knobd);

    this.innercontainer = document.createElement("div");

    container.appendChild(topcontainer);
    container.appendChild(this.innercontainer);

    this.container = container;
    var that = this;

    GEvent.addDomListener(this.knob, "click", function() {that.toggle()});

    // attach the control to the parent
    parent.getContainer().appendChild(this.container);

    return this.container;
}

Panel.prototype.getContainer = function() {
    return this.innercontainer;
}

Panel.prototype.toggle = function() {
    this.active = !this.active;
    this.knob.src = "script/images/knob" + (this.active? "_green" : "") + ".png"
}

Panel.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(this.x, this.y));
}

Panel.prototype.addControl = function(_control) {
    _control.initialize(this);
    _control.initializePosition();
}

Panel.prototype.initializePosition = function() {
    this.container.style.position = "absolute";
    this.container.style.top = this.y + "px";
    this.container.style.left = this.x + "px";
}

//******************************************************************************
// Labeled marker
//******************************************************************************
/* Constructor for an extended Marker class */
function LabeledMarker(latlng, options){
    this.latlng = latlng;
    this.labelText = options.labelText || "";
    this.labelClass = options.labelClass || "markerLabel";
    this.labelOffset = options.labelOffset || new GSize(0, 0);
    GMarker.apply(this, arguments);
}

LabeledMarker.prototype = new GMarker(new GLatLng(0, 0));

// Creates the text div that goes over the marker.
LabeledMarker.prototype.initialize = function(map) {
        // Do the GMarker constructor first.
        GMarker.prototype.initialize.call(this, map);

        var div = document.createElement("div");
        div.className = this.labelClass;
        div.innerHTML = this.labelText;
        div.style.position = "absolute";
        map.getPane(G_MAP_MARKER_PANE).appendChild(div);

        this.map = map;
        this.div = div;
}

// Redraw the rectangle based on the current projection and zoom level
LabeledMarker.prototype.redraw = function(force) {
        GMarker.prototype.redraw.call(this, map);

        // We only need to do anything if the coordinate system has changed
        if (!force) return;

        // Calculate the DIV coordinates of two opposite corners of our bounds to
        // get the size and position of our rectangle
        var p = this.map.fromLatLngToDivPixel(this.latlng);
        var z = GOverlay.getZIndex(this.latlng.lat());

        // Now position our DIV based on the DIV coordinates of our bounds
        this.div.style.left = (p.x + this.labelOffset.width) + "px";
        this.div.style.top = (p.y + this.labelOffset.height) + "px";
        this.div.style.zIndex = z + 1; // in front of the marker
}

// Remove the main DIV from the map pane
LabeledMarker.prototype.remove = function() {
  this.div.parentNode.removeChild(this.div);
  this.div = null;
  GMarker.prototype.remove.call(this);
}