// extend Apple Core's slider class
var OverlayGallerySlider = Class.create(AC.Slider.prototype, {

	createArrows: function() {
		// previous arrow
		this.prevArrow = Builder.node('a', { 'class':'ACSliderPreviousArrow' }, '<');
		Event.observe(this.prevArrow, 'click', function(evt) {
			if (evt) evt.stop();
			if (this.currentPage != 1) this.getPrevious();
		}.bind(this));
		this.container.appendChild(this.prevArrow);

		// next arrow
		this.nextArrow = Builder.node('a', { 'class':'ACSliderNextArrow' }, '>');
		Event.observe(this.nextArrow, 'click', function(evt) {
			if (evt) evt.stop();
			if (this.currentPage != this.totalPages) this.getNext();
		}.bind(this));
		this.container.appendChild(this.nextArrow);
	},

	// get's called in initialize upon construction
	populate: function() {
		var items = this.container.up().select('.item');
		for (var i=0; i<items.length; i++) {
			var sliderItem = new OverlayGallerySliderItem(items[i], i);
			this.items.push(sliderItem);
		}

		this.render(1);
	},

	scrolltoPageNumber: function(toPageNumber, direction) {
		// if we're not going to the current page & we're not already doing something ...
		if (this.currentPage != toPageNumber && !this.isAnimating) {

			// if we don't know the direction, figure it out (-1 is next, 1 is previous)
			if (!direction) var direction = this.currentPage-toPageNumber;

			var prop3 = (direction==1) ? 'Left Arrow' : 'Right Arrow';
			AC.Tracking.trackClick({
				prop3: AC.Tracking.pageName()+' - Slider Button - '+prop3
			}, this, 'o', AC.Tracking.pageName());

			this.isAnimating = true;

			// set the current page to the one we're going to
			this.currentPage = toPageNumber;
			// and fix the number if we're going to before the first page or page after the last page
			this.resetPages();

			// remove the 'active' class on the page nav items
			var pageNavAnchors = this.pageNav.getElementsByTagName('a');
			for (var i=0, anchor; anchor=pageNavAnchors[i]; i++) {
				if (Element.hasClassName(anchor, 'active')) Element.removeClassName(anchor, 'active');
				if (anchor.innerHTML==this.currentPage) Element.addClassName(anchor, 'active');
			}

			// do the scroll
			var options = {
				duration: 0.5,
				queue: { position:'end', scope:'sliderQueue', limit:1 },
				afterFinish: this.afterScroll.bind(this)
			};

			// TODO slider needs to be reworked, pretty inflexible
			//may not always have the mask dimensions prior to this point.
			//probably need to maintain a reference to the mask itself to 
			//recalculate the dimendions if necessary. Only recalculating 
			//if it's 0 right now but could do it more often to aid in
			//flexibile resizing
			if (!this.maskInnerDimension) {
				this.positionWithinMask(this.container);
			}

			if (this.orientation == 'horizontal') {
				new Effect.MoveBy(this.list, 0, this.maskInnerDimension*direction, options);
			} else {
				new Effect.MoveBy(this.list, this.maskInnerDimension*direction, 0, options);
			}
		} else {
			this.resetArrows();
		}
	},

	resetArrows: function() {
		if (this.prevArrow) {
			this.prevArrow.removeClassName('inactive');
		}
		if (this.nextArrow) {
			this.nextArrow.removeClassName('inactive');
		}

		if (this.currentPage == 1 && this.prevArrow) {
			this.prevArrow.addClassName('inactive');
		} else if (this.currentPage == this.totalPages && this.nextArrow) {
			this.nextArrow.addClassName('inactive');
		}
	},

	resetPages: function() {
		this.resetArrows();

		if (this.currentPage == 0) {
			this.currentPage = this.totalPages;
			this.positionOffset = -this.maskInnerDimension*this.totalPages + 'px';
			this.prevArrow.addClassName('inactive');
		} else if (this.currentPage == 1) {
			this.currentPage = 1;
			this.positionOffset = -this.maskInnerDimension + 'px';
		} else if (this.currentPage == this.totalPages+1) {
			this.currentPage = 1;
			this.positionOffset = -this.maskInnerDimension+'px';
			this.nextArrow.addClassName('inactive');
		} else {
			this.positionOffset = false;
		}
	}

});


var OverlayGallerySliderItem = Class.create(AC.SliderItem, {
	initialize: function(input, index) {
		this.contents = input;
		this.index = index+1;
	},

	render: function() {
		var li = new Element('li');
		li.setAttribute('index', this.index);
		li.appendChild(this.contents);
		return li;
	}
});