/*
	Barometer
	-------------------------------------------------------------

	Autor: Christoph Edthofer
	Datum: 1.3.2010

	Beschreibung: Eine Javascript-Klasse, die es ermöglicht aus zwei Bildern (Hintergrund, Vordergrund)
	einen Barometer mit einem gewissen Stand zu erzeugen. Hintergrund und Vordergrund müssen zwei 
	gleich große Bilder sein. Das Hintergrund-Bild zeigt den Barometer im leeren, das Vordergrund-Bild im
	vollen Zustand.
	
	Der minimale Aufruf:
	
	<div id="barometer" style="background: transparent url('hintergrund.png') no-repeat; width:50px; height:260px;"></div>
	<script>
		baro = new Barometer('barometer', {'overlay_image':'vordergrund.png'});
	</script>
	
*/
var Barometer = Class.create();
Barometer.prototype = {
    initialize: function(element, options) {
		options = options || {};
		
        this.element              = $(element);
        this.min_value            = options['min_value'] || 0;
		this.max_value            = options['max_value'] || 100;
		this.current_value        = options['current_value'] || 0;
		this.overlay_image        = options['overlay_image'];
		this.overlay_image_repeat = options['overlay_image_repeat'] || 'no-repeat';
		this.overlay_z_index      = options['overlay_z_index'] || 5000;
		this.top_offset           = options['top_offset'] || 0;
		this.bottom_offset        = options['bottom_offset'] || 0;
		
		this.createOverlay();
		this.setHeightValue(this.current_value);
    },
	createOverlay: function() {
		if(this.overlay_image !== undefined) {
			background = 'background: transparent url("'+this.overlay_image+'") '+this.overlay_image_repeat+' bottom left;'
		}
		else {
			background = 'background: #F00;';
		}
		this.overlay = new Element('div',{'style':background+' z-index:'+this.overlay_z_index+';'});
		this.element.up().insert(this.overlay);
		this.overlay.absolutize();
		this.overlay.clonePosition(this.element);
	},
	setHeightValue: function(value) {
		max_height = this.element.getHeight()-this.bottom_offset-this.top_offset;
		new_height = ((max_height/this.max_value) * value);
		top_offset = this.element.viewportOffset()[1]+this.element.getHeight()-new_height-this.bottom_offset;
		
		// find coordinate system to use
	    var delta = 0;
	    var parent = null;
	    // position:absolute needs offsetParent deltas
	    if (Element.getStyle(this.element, 'position') == 'absolute') {
	      parent = this.element.getOffsetParent();
	      delta = parent.viewportOffset()[1];
	    }
        
	    // correct by body offsets (fixes Safari)
	    if (parent == document.body) {
	      delta -= document.body.offsetTop;
	    }
		
		h = Math.ceil(new_height+this.bottom_offset);
		t = Math.floor(top_offset-delta);
		this.overlay.style.height = h+'px';
		this.overlay.style.top = t+'px';
	}
}