/*  Window.Growl, version 2.0: http://icebeat.bitacoras.com
 *  Daniel Mota aka IceBeat <daniel.mota@gmail.com>
 *  
 *  Mod for usage with Prototype/Script.aculo.us by silvanji <silvan@liip.ch>
--------------------------------------------------------------------------*/
var Gr0wl = {};
Gr0wl.Base = Class.create({
	
    queue:[],
    
	options: {
		image: 'images/logo_growl.png',
		title: '',
		text: 'Aproxime o zoom ou busque um endereço para ver os postos',
		duration: 3.0,
		id: 'zoom',
		fixed: true
	},
	
	initialize: function(image) {
	    this.image = new Element('img', {src: image});
		this.create();
    },
	
	create: function(styles) {
	    this.image.setStyle('position:absolute;display:none');
		Element.setOpacity(this.image, 0.0);
		this.block = new Element('div');
        this.block.setStyle('text-align:left;position:absolute;display:none;z-index:999;color:#FFFFFF;font: 12px/14px;'+styles.div);
		this.block.setOpacity(0.0);
		this.block.insert(new Element('img').setStyle(styles.img));
		this.block.insert(new Element('h3').setStyle(styles.h3));
		this.block.insert(new Element('p').setStyle(styles.p));
	},
	
    show: function(options) {
	    
        options = Object.extend(this.options, options);
	    var elements = [this.image.cloneNode(true), this.block.cloneNode(true)];
        
        elements.each(function(e, i) {
            $('maparea').appendChild(e);
            e.setStyle(options.position);
			elements[0].setAttribute('id', options.id+'_img');
			elements[1].setAttribute('id', options.id);
            if(i) {
                var img = e.down(0);
                img.setAttribute('src', options.image);
                img.next().update(options.title).next().update(options.text);
            }
        });
        var fxOpts = {duration:0.8, from:0.0, sync:true};
        new Effect.Event({
            beforeStart: function() {
                new Effect.Parallel([
                    new Effect.Opacity(elements[0], Object.extend(fxOpts, {to:0.7})),
                    new Effect.Opacity(elements[1], Object.extend(fxOpts, {to:0.9}))
                ], {duration:0.8, queue:options.queue}
                
                );
            },
            
            duration: options.duration,
            queue: options.queue
        });
		var fixed = options.fixed;
        if (fixed == false) {
		  this.hide(elements);
		}
    },
	
	hide: function(elements) {
        var fxOpts = {
            duration:0.2, 
            to:0.0,
            afterFinish: function(o) {
                o.element.remove();
            },
            sync:true
        };
        
        new Effect.Parallel([
            new Effect.Opacity(elements[0], Object.extend(fxOpts, {from:0.7})),
            new Effect.Opacity(elements[1], Object.extend(fxOpts, {from:0.9}))
        ], {
            duration:0.2, 
            queue:'end', 
            afterFinish:(function() {
                this.queue.shift();
            }).bind(this)
           }
        );
    },
	
	getScrollTop: function() {
        var scrollTop = $('maparea').scrollTop;
        if (scrollTop == 0) {
            if (window.pageYOffset) {
                scrollTop = window.pageYOffset;
            } else {
                scrollTop = ($('maparea').parentElement) ? $('maparea').parentElement.scrollTop : 0;
            }
        }
        return scrollTop;
	},
    
    getScrollLeft: function() {
        var scrollLeft = $('maparea').scrollLeft;
        if (scrollLeft == 0) {
            if (window.pageXOffset) {
                scrollLeft = window.pageXOffset;
            } else {
                scrollLeft = ($('maparea').parentElement) ? $('maparea').parentElement.scrollLeft : 0;
            }
        }
        return scrollLeft;
    }
	
});


Gr0wl.Smoke = Class.create(Gr0wl.Base, {
	
	
	
	create: function($super, oArgs) {
		$super({
			div: 'width:298px;height:73px;',
			img: 'float:left;margin: 22px 12px 12px 12px;',
			h3: 'margin:0;padding:9px 0px;color:#FFFFFF;font-size:14px;',
			p: 'margin:0px 10px;font-size:12px;font-weight:bold;'
		});
	},
	
	show: function($super, options) {
		var fixed = options.fixed;
		var divon = [$('zoom'), $('no_price'), $('no_gas')];
		var last = this.queue.last();
		if (divon != ',,' && !last){last=1;}
		else if(!last) {
		  last = 0;
		}  
		scrollTop = this.getScrollTop();
		if (fixed == true) {
			delta = 10;
		}
		else {
			delta = scrollTop + 10 + (last * 83);
		}
		options = Object.extend(options, {
            position: {'top':delta+'px', 'left':'60px', 'display':'block'},
            queue: 'parallel'
        }); 
		if (fixed == true) {
			this.queue;
		}else {
			this.queue.push(last + 1);
		}
		$super(options);

	},
	
	hide: function($super, elements) {
		$super(elements,{'opacity': 0 });
	}
	
});

Gr0wl.Bezel = Class.create(Gr0wl.Base, {
	
    
	create: function($super) {
		this.i=0;
		$super({
			div: 'width:211px;height:206px;text-align:center;',
			img: 'margin-top:25px;',
			h3: 'margin:0;padding:0px;padding-top:22px;font-size:14px;',
			p: 'margin:15px;font-size:12px;'
		});
	},
	
	show: function($super, options) {
		var top = this.getScrollTop()+($('maparea').offsetHeight /2)-105,
		left = this.getScrollLeft()+($('maparea').offsetWidth / 2)-103;
        options = Object.extend(options, {
            position: {'top':top+'px', 'left':left+'px', 'display':'block'},
            queue: 'end'
        });
        $super(options);
    },
	
	hide: function($super, elements) {
		$super(elements, { 'opacity': 0, 'margin-top': [0,50] });
	}
	
});

var Growl =  {
    initialize: function() {
        this.oBezel = new Gr0wl.Bezel('images/bezel.png');
        this.Bezel =  this.oBezel.show.bind(this.oBezel);
        this.oSmoke = new Gr0wl.Smoke('images/smoke.png');
        this.Smoke = this.oSmoke.show.bind(this.oSmoke);
    }
};



Event.observe(window, 'load', function() {
    Growl.initialize();
 });