// EQ

$(function() { // DOM Ready
	var whiteout = $('<div id="whiteout"/>').prependTo('body');
	var stories = $('#stories');
	$.easing.def = 'easeInOutSine';
	stories.children().hover(function() {
		if(!$(this).is('.open')) {
			$(this).stop().animate({marginTop:'-3px',paddingTop:'3px',paddingBottom:'3px'},300).find('span').stop().animate({opacity:0.8},200);
//			$(this).stop().animate({width:'35px'},300).find('span').stop().animate({opacity:0.8},200);
		}
	},function() {
		var self = $(this);
		if(!self.is('.open')) {
			setTimeout(function() {
				self.stop().animate({marginTop:'0',paddingTop:'0',paddingBottom:'0'},150).find('span').stop().animate({opacity:0},150);
//				self.stop().animate({width:'15px'},100).find('span').stop().animate({opacity:0},100);
			},100);
		}
	}).click(function() {
		if(!$(this).is('.open')) {
			$(this).animate({width:'220px'},800).addClass('open').find('span').animate({opacity:0});
			stories.animate({marginLeft:'-110px'},800);
			$(this).siblings('.open').click();	
		} else {
			stories.animate({marginLeft:'0'},800);
			$(this).animate({width:'15px'},800,function() {
				$(this).removeClass('open');
			});
		}	
	});
	// Scrolling behavior
	var edgeWidth = 0.20, // width of hover area on right and left edges for scrolling (portion of frame)
		maxSpeed = 10, // maximum speed (pixels per frame)
		minSpeed = 0.5, // minimum speed (pixels per frame)
		fps = 60, // frames per second
		refreshRate = 100, // how often to listen for a mouse move event
		threshold = 20; // how many pixels does the mouse have to have moved to register the change?
	// Set initial positions
	var stripWidth = stories.children().length*30+15,
		frame = $('#equalizer'),
		frameWidth;
	stories.width(stripWidth+'px'); // set the strip width if incorrect
	$(window).resize(function() { // calculate the hover areas and the strip "center" on resize
		frameWidth = frame.width();
		leftEdge = edgeWidth*frameWidth;
		rightEdge = frameWidth-(edgeWidth*frameWidth);
		frame.height(($(window).height()-360)+'px');
	}).resize(); // and do it now
	var offset = -1*(stripWidth/2); // initial offset
	stories.css('left',offset);
	// Attach mouseover behavior
	var destination,
		lastPos=-100,
		lastTime=0;
	frame.mousemove(function(e) {
		var curPos = e.clientX,
			curTime = new Date().getTime(),
			modifier;
		if(Math.abs(curPos-lastPos)<threshold||curTime-lastTime<refreshRate) return; //  if the mouse has moved less than 20 or less than 100ms have elapsed, don't fire
		lastPos = curPos;
		lastTime = curTime;
		if(curPos<leftEdge) {
			modifier = Math.pow((leftEdge-curPos)/leftEdge,3);
			destination = 0;
		} else if(curPos>rightEdge) {
			modifier = Math.pow((curPos-rightEdge)/(frameWidth-rightEdge),3);
			destination = -1*(stripWidth-frameWidth);
		} else {
			destination = offset;
			modifier = 0;
		}
		slide(maxSpeed*modifier);
	});
	var animation;
	var slide = function(speed) {	
			clearInterval(animation);
			var direction = destination>offset ? 1 : -1;
			animation = setInterval(function() {
				var distance = Math.abs(destination-offset), // distance remaining
					modifier = Math.pow(distance/stripWidth,0.3), // moderator decelerates as the destination approaches
					step = Math.max(speed*modifier,minSpeed);
				if(distance<=step) { // if the destination is less than the next step
					offset=destination;
					clearInterval(animation);
				} else {
					offset+=step*direction;
				}
				stories.css('left',offset+'px');
			},1000/fps);
		};
	// And finally, fade in the strip
	var visible = stories.children().filter(function() {
		var offset = $(this).offset().left;
		return offset+15>0&&offset<frameWidth;
	});
	visible.css('opacity',0);
	stories.css('opacity',1);
	var delay = 0;
	visible.each(function(i) {
		var self = $(this);
		setTimeout(function() {
			self.animate({opacity:0.2},100,function() {
				$(this).animate({opacity:1},300);	
			});
			if(i==visible.length-1) $('#whiteout').remove();
		},delay);
		delay+=10;
	});
});