var HeaderBanner = new Class({

    Implements: [Options, Events],

    options: {
		logo: 'logo-pubec',
        banner: 'header-banner',
        frame1: 'banner-frame1',
        frame2: 'banner-frame2',
        morph: {
             duration: 3000,
             transition: Fx.Transitions.Quad.easeInOut
        }
    },

    initialize: function(logo, banner, options, frame1, frame2) {
    	this.setOptions(options);    	
    	
		this.options.logo = $(this.options.logo);
    	if (!this.options.logo) {
    		return;
    	}

		this.options.banner = $(this.options.banner);
    	if (!this.options.banner) {
    		return;
    	}

      		this.options.frame1 = $(this.options.frame1);
    	if (!this.options.frame1) {
    		return;
    	}

      		this.options.frame2 = $(this.options.frame2);
    	if (!this.options.frame2) {
    		return;
    	}

//    	var myHorizontalSlide = new Fx.Slide(this.options.banner, {mode: 'vertical', duration: 400});
    	var myHorizontalSlide  = new Fx.Morph(this.options.banner, this.options.morph);
    	var banner = this.options.banner;
    	var frame1 = this.options.frame1;
    	var frame2 = this.options.frame2;

    	this.options.logo.addEvents({
    		mouseenter: function(){
    			frame1.morph({
    				opacity: 1
    			});
    			(function(){
        			frame2.morph({
        				'opacity': 1
        			});
          }).delay(3000);
    		},
    		mouseleave: function(){
        			frame1.morph({
        				opacity: 0
        			});
    			(function(){
        			frame2.morph({
        				'opacity': 0
        			});
          }).delay(3000);
    		}
    	});

    	
    }

});