// top apps slider
var slider = Class.create();
Object.extend(Object.extend(slider.prototype, AC.Slider.prototype), {
	// get's called in initialize upon construction
	populate: function() {
		var items = document.getElementsByClassName('slideritem');
		for (var i=0; i<items.length; i++) {
			var html = items[i];
			var sliderItem = new AC.SliderItem(html);
			this.items.push(sliderItem);
		}
		this.render(4);
		this.container.down('ul').id="collection";
		this.trackApps();
	},
	
	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;
			AC.Tracking.trackClick({
				prop3: "iTunes App Store - What's Hot - Slider Button - P"+toPageNumber
			}, this, 'o', document.title);
			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');
			}
			// try {console.debug(this.list,"Scrolling to page", toPageNumber);} catch(e) {}
			// 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') {
				// try {console.debug("X: ", this.maskInnerDimension*direction);} catch(e) {}
				new Effect.MoveBy(this.list, 0, this.maskInnerDimension*direction, options);
			} else {
				new Effect.MoveBy(this.list, this.maskInnerDimension*direction, 0, options);
			}
		}
	},
	
	trackApps: function() {
		$$('.slideritem').each(function(item) {
			AC.Tracking.trackLinksWithin(item, function(link) { $(link).hasClassName('more')} , document.title, {
				prop3: 'iTunes App Store - What’s Hot - '+item.down('h4 a').innerHTML
			});
	
		});

		AC.Tracking.trackLinksWithin('hoverlay_html', function(target) {
			return target.hasClassName('more');
		}, 'iTunes App Store - What’s Hot - View Game In App Store', { prop3:'View Game In App Store' }, {
			beforeTrack: function(target, title, properties) {
				title = 'iTunes App Store - What’s Hot - View Game In App Store - '+$('hoverlay_html').down('h4 a').innerHTML;
				properties.prop3 = title;
				return { title:title, properties:properties };
			}
		});
	}

});

AC.SliderItem.prototype.render = function() {
	var li = new Element('li', { 'class':'app' }).update(this.html);
	return li;
}

var Hoverlay = Class.create({
	trigger: null,
	initialize:function(trigger) {
		this.trigger = trigger;
		this.hoverlay = $('hoverlay');
		this.hoverlay_html = $('hoverlay_html');
		trigger.observe('mouseover', this.setup.bind(this));		
	},
	
	setup: function() {
		this.hoverlay.hide();
		
		var extraVspace = this.trigger.getHeight() == 136 ? 20 : 0;
		var windowTop = document.viewport.getScrollOffsets()[1];

		var vSpace = this.trigger.cumulativeOffset()[1]+extraVspace - windowTop;
		
		if(vSpace < 265) {
			this.hoverlay.setStyle({
				left: this.trigger.cumulativeOffset()[0]+this.trigger.getWidth()+'px',
				top: this.trigger.cumulativeOffset()[1] +60+extraVspace+'px'
			});
			this.hoverlay.addClassName('lowered');
		} else {
			this.hoverlay.setStyle({
				left: this.trigger.cumulativeOffset()[0]+this.trigger.getWidth()/2-25 +'px',
				top: this.trigger.cumulativeOffset()[1]- this.hoverlay.getHeight()+extraVspace +'px'
			});
		}
		
		hoverlayTimer = window.setTimeout(this.show.bind(this), 300);
		Event.observe(document, 'mousemove', function(e) {
			if(!(e.findElement('#hoverlay')) && !(e.findElement('.hoverlaytrigger'))) {
				window.clearTimeout(hoverlayTimer);
				this.hide();				
			}
		}.bind(this))
	},
	show: function() {
		var html = this.trigger.up('li').down('.details').innerHTML;
		this.hoverlay_html.update(html);
		this.hoverlay.appear({ duration:0.3 });
	},
	
	hide: function() {
		this.hoverlay.hide();
		if(this.hoverlay.hasClassName('lowered')) this.hoverlay.removeClassName('lowered');				
	}
	
});

Event.onDOMReady(function() {
	// top apps slider
	new slider('appslider');
	$$('.hoverlaytrigger').each(function(trigger) {
		new Hoverlay(trigger);
	})
})