var classRef;

function initSlider(element,initFx){
    var id=element;
    element=$(element);
    
    if (element.retrieve("slider-initialized")) return;
    element.store("slider-initialized",true);

	/* thumbnails example , div containers */
    var slider = new SlideItMoo({
        itemsVisible: 4, // the number of thumbnails that are visible
        currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
        thumbsContainer: element.getElement('.thumbs'),
        elementScrolled: element.getElement('.thumb_container'),
        overallContainer: element,
        slideSteps: 4
    });

    // loadImages.call(slider, 0);
    // slider.addEvent("scroll", loadImages);

    loadImages(0);
    slider.addEvent("scroll", loadImages);

    function loadImages(step) {
        var start = step,
            end = Math.min(start + slider.options.itemsVisible, slider.images.length);
        var thumbnailsToLoad = slider.images.slice(start, end);
        thumbnailsToLoad.each(function(thumbnail) {
            var img = thumbnail.getElement("img");
            if (img.retrieve("slider:loaded")) return;
            img.store("slider:loaded", true);
            img.addEvent("load", function() {
                this.setStyle("visibility","visible");
            });
            img.src = img.getAttribute("hiddensrc");
        });
    }
}

/*
	SlideItMoo v1.0 - Image slider
	(c) 2007-2008 Constantin Boiangiu <http://www.php-help.ro>
	MIT-style license.
*/
var SlideItMoo = new Class({

	Implements: [Options, Events],

	options: {
		itemsVisible: 5,
		showControls: 1,
		autoSlide: 0,
		transition: Fx.Transitions.linear,
		currentElement: 0,
		thumbsContainer: 'thumbs',
		elementScrolled: 'thumb_container',
		overallContainer: 'gallery_container',
		slideSteps: 1
	},

	initialize: function(options) {
		this.setOptions(options);
		this.images = $(this.options.thumbsContainer).getElements('.thumbnail');
		// assumes that all thumbnails have the same width

		var firstImage = this.images[0];
		this.image_size = firstImage.getSize();
		this.image_size.margin = firstImage.getStyle("margin-right").toInt() + firstImage.getStyle("margin-left").toInt();
		this.image_size.padding = firstImage.getStyle("padding-right").toInt() + firstImage.getStyle("padding-left").toInt();

		// resizes the container div's according to the number of itemsVisible thumbnails
		this.setContainersSize();

		this.myFx = new Fx.Scroll(this.options.elementScrolled, { transition: this.options.transition });
		// adds the forward-backward buttons
		if (this.images.length > this.options.itemsVisible) {
			this.fwd = this.addControlers('addfwd');
			this.bkwd = this.addControlers('addbkwdDisabled');
			this.forward();
			this.backward();
			/* if autoSlide is not set, scoll on mouse wheel */
			if (!this.options.autoSlide) {
				$(this.options.thumbsContainer).addEvent('mousewheel', function(ev) {
					new Event(ev).stop();
					ev.wheel < 0 ? this.fwd.fireEvent('click') : this.bkwd.fireEvent('click');
				} .bind(this));
			}
			else {
				this.startIt = function() { this.fwd.fireEvent('click') } .bind(this);
				this.autoSlide = this.startIt.periodical(this.options.autoSlide, this);
				this.images.addEvents({
					'mouseover': function() {
						$clear(this.autoSlide);
					} .bind(this),
					'mouseout': function() {
						this.autoSlide = this.startIt.periodical(this.options.autoSlide, this);
					} .bind(this)
				})
			}
		};

		// if there's a specific default thumbnail to start with, slide to it
		if (this.options.currentElement !== 0) {
			this.options.currentElement -= 1;
			this.slide(this.options.slideSteps);
		}

		$(this.options.elementScrolled).scrollLeft = 0;


	},

	setContainersSize: function() {
		var w = this.options.itemsVisible * this.image_size.x - this.image_size.padding;
		$(this.options.overallContainer).setStyle("width", w + 50 * this.options.showControls);
		$(this.options.elementScrolled).setStyle("width", w);
	},

	forward: function() {
		this.fwd.addEvent('click', function() {
			this.slide(this.options.slideSteps);
		} .bind(this));
	},

	backward: function() {

		this.bkwd.addEvent('click', function() {
			this.slide((-1) * this.options.slideSteps);
		} .bind(this))
	},

	addControlers: function(cssClass) {
		element = new Element('div', {
			'class': cssClass,
			styles: {
				'display': this.options.showControls ? '' : 'none'
			}
		}).injectInside($(this.options.overallContainer));
		return element;
	},

	slide: function(step) {

		/* if autoslice is on, when end is reached, go back to begining */
		if (this.options.autoSlide && this.options.currentElement >= this.images.length - this.options.itemsVisible) {
			this.options.currentElement = -1;
		}

		if ((this.options.currentElement < this.images.length - this.options.itemsVisible && step > 0) || (step < 0 && this.options.currentElement !== 0)) {
			this.myFx.cancel();
			this.options.currentElement += step;

			var toElement = this.images[this.options.currentElement];
			var position = $(toElement).getPosition(toElement.getParent());
			this.myFx.start(position.x, position.y);
		}


		if (this.options.currentElement == 0) {
			if (this.fwd.hasClass('addfwdDisabled') && this.images.length > this.options.itemsVisible) {
				this.replaceClass(this.fwd, 'addfwdDisabled', 'addfwd');
			}
			this.replaceClass(this.bkwd, 'addbkwd', 'addbkwdDisabled');
		}
		else if (this.options.currentElement + step >= this.images.length) {
			if (this.bkwd.hasClass('addbkwdDisabled')) {
				this.replaceClass(this.bkwd, 'addbkwdDisabled', 'addbkwd');
			}
			this.replaceClass(this.fwd, 'addfwd', 'addfwdDisabled');
		}
		else {
			this.replaceClass(this.bkwd, 'addbkwdDisabled', 'addbkwd');
			this.replaceClass(this.fwd, 'addfwdDisabled', 'addfwd');
		}

		this.fireEvent("scroll", [this.options.currentElement]);

	},
	replaceClass: function(element, oldClass, newClass) {
		if (element.hasClass(oldClass))
			element.removeClass(oldClass).addClass(newClass);
	}
})