var Dock = new Class({

	Implements: Options,

	options: {
		initWidth: 34,      /* larghezza iniziale immagini */
		initHeight: 44,     /* altezza iniziale immagini */
		maxWidth: 54,       /* larghezza massima immagini */
		maxHeight: 69,      /* altezza massima immagini */
		elCaption: '',      /* id elemento dove mostrare le etichette se diverso da default */
		classCaption: ''    /* classe per lo span dove viene inserita la caption */
	},

    initialize: function(element,options){
		this.element = this.subject = $(element);
		this.setOptions(options);

		this.images = null;             // Array Immagini
		this.links = null;              // Array collegamenti delle immagini

		this.initDock();
	},

	initDock: function(){

        this.images = this.element.getElements('img');
	    this.images.setStyles({'height': this.options.initHeight, 'width': this.options.initWidth});
	    this.images.set('morph',{duration:200});
        
        this.images.each(
            function(img){
                var myClass = this; // Puntatore alla mia classe
                var originalHTML = $(myClass.options.elCaption).get('html');

                var elCaption = myClass.options.elCaption;
                var classCaption = myClass.options.classCaption;
                var dockElement = myClass.element;

                img.addEvent('mouseenter',function(){
                    //$(elCaption).set('html','<span class="' + classCaption + '">'+img.get('alt')+'</span>');
                    img.morph({'height':myClass.options.maxHeight,'width':myClass.options.maxWidth});
                }).addEvent('mouseleave',function(){
                    //$(elCaption).set('html', originalHTML);
                    img.morph({'height':myClass.options.initHeight,'width':myClass.options.initWidth});
                });

            },
            this // bind my class with array.each
        );

        // Init docking width
        this.images.setStyle('display', 'inline');
	}

});