// good-carousel
var GoodCarousel = new Class({
    container: null,
    inner: null,
    animate: null,
    nav: null,
    data: null,
    timer: null,
    ticks: 0,
    options: {
        width: 920,
        height: 395,
        delay: 5100,
        duration: 700
    },
    Implements: [Options],
    initialize: function (container, options) {
        this.setOptions(options);
        this.container = document.id(container);
        this.parseData();
        this.setup();
    },
    parseData: function () {
        var data = [],
            slides = this.container.getElements(".carousel-data");
        slides.each(function (el, i) {
                var slide = {},
                    link = el.getElement("p a"),
                    img = el.getElement("img");
                slide.title = el.getElement("h3").get("text");
                slide.desc = link.get("text");
                slide.url = link.get("href");
                slide.img = img.get("src");
                slide.alt = img.get("title");
                slide.rel = link.get("rel");
                slide.index = i;
                data.push(slide);
            }, this);
        this.data = data;
        this.container.empty();
    },
    setup: function () {
        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.width * slides.length);
        this.nav = new Element("ul", {
            "class": "carousel-nav"
        });
        this.container.grab(this.nav);
        slides.each(function (data, i) {
            var biglink_tpl = '<a class="carousel-item" href="{url}"><img src="{img}" height="{height}" width="{width}" border="0" /><span class="carousel-item-info"><strong><span>{title}</span></strong><br /><span>{desc}</span></span></a>',
                biglink_data = {
                    url: data.url,
                    img: data.img,
                    height: this.options.height,
                    width: this.options.width,
                    title: data.title,
                    desc: data.desc
                };
            var biglink = biglink_tpl.substitute(biglink_data);
            var biglink_e = new Element("div", {
                    html: biglink
                }).getFirst();
            biglink_e.setStyle("width", this.options.width);
            biglink_e.set("rel", data.rel);
            this.animate.grab(biglink_e);
            var nav_tpl = '<li><a id="carousel-link" href="{link}" data="{data}" title="{title}">{title}</a></li>',
                nav_data = {
                    link: data.url,
                    title: data.title
                };
            var nav = nav_tpl.substitute(nav_data);
            var nav_e = (new Element("div", {
                    html: nav
                })).getFirst();
            nav_e.store("data", data);
            nav_e.setStyle("width", Math.floor(this.options.width / slides.length));
            nav_e.getFirst().set("rel", data.rel);
            if (i == 0) {
                    nav_e.addClass("selected");
                }
            if (i == (slides.length - 1)) {
                    nav_e.addClass("last");
                }
            nav_e.addEvents({
                    "mouseenter": this.events.over.bind(this),
                    "mouseleave": this.events.out.bind(this)
                });
            this.nav.grab(nav_e);
        }, this);
        this.tick();
    },
    tick: function () {
        var links = this.nav.getElements("li a");
        links.removeClass("selected");
        links.each(function (el, i) {
            if (this.ticks == i) {
                el.addClass("selected");
            }
        }, this);
        this.slide(this.ticks * this.options.width);
        this.ticks++;
        if (this.ticks > (links.length - 1)) {
            this.ticks = 0;
        }
        $clear(this.timer);
        this.timer = this.tick.delay(this.options.delay, this);
    },
    events: {
        over: function (event) {
            var data = event.target.getParent().retrieve("data", {
                index: 0
            });
            this.ticks = data.index;
            this.tick();
            $clear(this.timer);
        },
        out: function (event) {
            this.timer = this.tick.delay(this.options.delay, this);
        }
    },
    slide: function (to) {
        this.animate.set("tween", {
            duration: this.options.duration
        });
        this.animate.tween("left", 0 - to);
    }
});