var Gallery = new Class({

    container: null,
    inner: null,
    animate: null,

    data: null,
    timer: null,
    ticks: 0,

    options: {
		itemwidth: 900,
        width: 900,
        height: 140,
        delay: 10000,
        duration: 500,
		rotate: 1
    },

    Implements: [Options],

    initialize: function(container, options) {
        this.setOptions(options);
        this.container = document.id(container);
		if(this.container == null)
			return;
        this.parseData();
        this.setup();
    },

    parseData: function() {
        var data = [],
		slides = this.container.getElements(".item");
        var el1;
        slides.each(function(el, i) {
			if (i == 0)
				el1 = el;
            data.push(el);
        },
        this);
        if (this.options.rotate == 1 && el1 != null) {
			data.push(el1.clone());
		}
        this.data = data;
    },

    setup: function() {
        leftarrow = document.id("arrowleft");
		if(leftarrow == null)
			return;
        leftlink = leftarrow.getElement("a");
        leftlink.addEvents({
            "click": this.events.clickleft.bind(this)
        });
        rightarrow = document.id("arrowright");
        rightlink = rightarrow.getElement("a");
        rightlink.addEvents({
            "click": this.events.clickright.bind(this)
        });
        this.container.setStyle("width", this.options.width).addClass("carousel");
        this.inner = new Element("div", {
            "class": "carousel-inner",
            "styles": {
                "width": this.options.width,
                "height": this.options.height
            }
        });
        this.container.grab(this.inner);
        this.animate = new Element("div", {
            "class": "carousel-animate",
            "styles": {
                "width": this.options.width
            }
        });
        this.inner.grab(this.animate);
        var slides = this.data;
        this.animate.setStyle("width", this.options.itemwidth * slides.length);
        slides.each(function(data, i) {
            this.animate.grab(data);
        },
        this);
        this.ticks--;
        this.tick();
    },

    tick: function() {
        this.ticks++;
		if (this.options.rotate == 0) {
			var numitems = this.options.width / this.options.itemwidth;
			var maxticks = (this.data.length - (this.data.length % numitems)) / numitems;
			if (this.ticks > maxticks) {
				this.ticks = 0;
			} else if (this.ticks < 0) {
				//this.animate.setStyle("left", 0);
				this.ticks = maxticks;
			}
		} else {
			if (this.ticks == this.data.length) {
				this.animate.setStyle("left", 0);
				this.ticks = 1;
			} else if (this.ticks < 0) {
				this.animate.setStyle("left", 0 - (this.data.length - 1) * this.options.width);
				this.ticks = this.data.length - 2;
			}
		}
        this.animate.set("tween", {
            duration: this.options.duration
        });
        this.animate.tween("left", 0 - this.ticks * this.options.width);

		if (this.options.delay > 0) {
			$clear(this.timer);
			this.timer = this.tick.delay(this.options.delay, this);
		}
    },

    events: {
        clickleft: function(event) {
            this.ticks -= 2;
            this.tick();
        },
        clickright: function(event) {
            this.tick();
        }
    },

    slide: function() {
    }

});

window.addEvent("domready", function() {
    gc = new Gallery("gallery", {rotate: 1, itemwidth: 900, width: 900, height: 200});
    gc2 = new Gallery("workgallery", {rotate: 0, itemwidth: 113, width: 904, height: 92, delay: 0});
});