﻿var Vertasource_Media_Thumbnails = new Class({
	Implements: [Options],
	
	options: {
		thumbnailImagesSelector : '#images a',
		showSingleThumbnail : false
	},

    initialize: function(options) {
		this.setOptions(options);
        if ($('images')) {

            var firstImage = $('images').getElement('a');
            var imageUrl = firstImage.get('href');

            this.mediumImageDiv = new Element('div', {
                'id': 'mediumImageDiv'
            });
            this.mediumImageDiv.inject($('images'), 'before');

            this.mediumImage = this.createMediumImage(imageUrl);
            this.mediumImage.inject(this.mediumImageDiv, 'top');

            var thumbnailImages = $$(this.options.thumbnailImagesSelector);

            if (thumbnailImages.length > 1 || this.options.showSingleThumbnail) {

                thumbnailImages.each(function(item) {
                    item.addEvent('click', function(e) {
                        //removes the link 
                        e.stop();
                        this.getImage(item);
                    } .bind(this));
                }, this);
            } else {
                $('images').destroy();
            }

        } else {
            noImage = new Element ('p', {
                'id':'noImageAvailable',
                 'text': 'No Image Available'
            });
           
            noImage.inject($('property-image'), 'top');
        }
    },

    getImage: function(item) {
        var medImage = this.createMediumImage(item.get('href'));
        medImage.set("opacity", 0);

        medImage.inject(this.mediumImageDiv, 'top');
        
        medImage.set('src', item.get('href'));
        medImage.fade(1);

        var next = medImage.getAllNext().destroy();
        medImage.set({ 'styles': { 'position': 'relative'} });
    },

    createMediumImage: function(imageUrl) {
        var mediumImage = new Element('img', {
            'id': 'medium',
            'src': imageUrl,
            'height' : 252,
            'width' : 252
        });

       // var reMooz = new ReMooz(mediumImage, {
            //origin: 'img',
            //shadow: 'onOpenEnd', // fx is faster because shadow appears after resize animation
            //resizeFactor: 0.8, // resize to maximum 80% of screen size
            //cutOut: false, // don't hide the original
            //opacityResize: 0.4, // opaque resize
            //dragging: true, // disable dragging
            //centered: true // resize to center of the screen, not relative to the source element
        //});

        return mediumImage;
    }


});

