if (!JL) var JL = {};


JL.Feature = Class.create({
    initialize: function (element) {
        this.element = $(element);
        if (!this.element) throw(Effect._elementDoesNotExistError);
    }
});


JL.ProductFeature = Class.create(JL.Feature, {
    initialize: function ($super, element) {
        $super(element);

        this.options = Object.extend({
            delay: 10
        }, arguments[2] || {});

        this.slider = this.element.select('.product-feature-slider')[0];
        this.features = this.slider.select('img');
        this.idx = 0;

        // Init events
        this.element.select(".content").each(function(label) {
            label.observe('mouseover', function (event) {
                event.element().up().show();
            });
            label.observe('mouseout', function (event) {
                event.element().up().hide();
            });
        });
        this.element.select('area').each(function (area) {
            area.observe('mouseover', function(event) {
                $(event.element().readAttribute('rel')).show();
            });
            area.observe('mouseout', function(event) {
                $(event.element().readAttribute('rel')).hide();
            });
        });

        // Start scroller
        this.executor = new PeriodicalExecuter(function() {
            this.next();
        }.bind(this), this.options.delay);
    },

    next: function () {
        var cur_idx = this.idx;

        // Increment index
        this.idx += 1;
        if (this.features.size() <= this.idx) {
            this.idx = 0;
        }

        // Move background
        new Effect.Move(this.slider, {
            x: this.features[this.idx].offsetLeft * -1,
            mode: 'absolute'
        });
    }
});


JL.MediaFeature = Class.create(JL.Feature, {
    initialize: function ($super, element) {
        $super(element);

        // Init events
        var first = null;
        this.element.select(".media-feature-covers img").each(function(img) {
            if (!first) {
		first = img.readAttribute('rel');
            }
            img.observe('click', function (event) {
                this.show(event.element().readAttribute('rel'));
            }.bind(this));
        }, this);

	this.show(first);
    },

    show: function (id) {
        // Ignore first time
        if (this.current) {
            if (this.current.id === id) {
                return;
            }
            // Hide old
	    if (this.current_products) {
		new Effect.DropOut(this.current_products);
	    }
            new Effect.Fade(this.current);
        }
        // Show new
        this.current = this.element.select('#' + id)[0];
        new Effect.Appear(this.current);
        this.current_products = this.element.select('#' + id + '-products')[0];
	if (this.current_products) {
	        new Effect.BlindDown(this.current_products);
	}
    }
});