// good-carousel
var GoodCarousel = new Class({
	container: null,
	inner: null,
	animate: null,
	nav: null,
	data: null,
	timer: null,
	ticks: 0,
	options: {
		width: 570,
		height: 295,
		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.cate = el.getElement("h3").get("text");
				slide.cate2 = el.getElement("p").get("text");
				slide.title = el.getElement("h4").get("text");
				slide.txt2 = el.getElement("h5").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": 570,
				"height": 295
			}
		});
		this.container.grab(this.inner);
		this.animate = new Element("div", {
			"class": "carousel-animate",
			"styles": {
				"width": 570
			}
		});
		this.inner.grab(this.animate);
		var slides = this.data;
		this.animate.setStyle("width", 570 * 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" /></a>',
				biglink_data = {
					url: data.url,
					img: data.img,
					height: this.options.height,
					width: 570,
					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", 570);
			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}" style="padding-left:5px;padding-right:2px; width:168px; height:75px;"><span class="gc_title">{cate}</span><span class="gc_desc">{desc}</span></a></li>',
				nav_data = {
					link: data.url,
					cate: data.cate,
					cate2: data.cate2,
					txt2: data.txt2,
					title: data.title,
					desc: data.desc
				};
			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", 175);
			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 * 570);
		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);
	}
	});