var storyviewer_items;
var numitems;
var currentStoryViewerItem = 1;

var storyviewer_timer;

var svcontrols = new Element('div', {	'id': 'svcontrols' });
var next = new Element('span', { 'class': 'next' });
var playpause = new Element('span', { 'class': 'playpause pause' });
var previous = new Element('span', { 'class': 'previous' });

function storyviewer_prv() {
	var prv = currentStoryViewerItem-1;
	if(prv < 1) prv = numitems;
	$('svFx'+currentStoryViewerItem).morph({ left: storyviewer_width });
	$('svFx'+prv).morph({ left: [-storyviewer_width, 0] });
	currentStoryViewerItem = prv;

	for(var i=0; i<offsetLoad; i++) {
		prv = prv-1;
		if(prv < 1) prv = numitems;
		var imageHolder = $('svFx'+prv).getElement('img');
		if(imageHolder.get('src')==imageBlankSrc) {
			imageHolder.setProperty('src', storyviewer_images[prv]);
		}
	}

}

function storyviewer_nxt() {
	var nxt = currentStoryViewerItem+1;
	if(nxt > numitems) nxt = 1;
	$('svFx'+currentStoryViewerItem).morph({ left: -storyviewer_width });
	$('svFx'+nxt).morph({ left: [storyviewer_width, 0] });
	currentStoryViewerItem = nxt;

	for(var i=0; i<offsetLoad; i++) {
		nxt = nxt+1;
		if(nxt > numitems) nxt = 1;
		var imageHolder = $('svFx'+nxt).getElement('img');
		if(imageHolder.get('src')==imageBlankSrc) {
			imageHolder.setProperty('src', storyviewer_images[nxt]);
		}
	}

}

function storyviewer_play() {
	storyviewer_paused = 0;
	storyviewer_timer = storyviewer_nxt.periodical(storyviewer_hold_time);
	$('svcontrols').getElement('span.playpause').removeClass('pause');
	$('svcontrols').getElement('span.playpause').addClass('play');
}


window.addEvent('domready', function() {
	
	storyviewer_items = $('StoryViewer').getElements('div.navitem');
	numitems = storyviewer_items.length;

	$('StoryViewer').grab(svcontrols);
	$('svcontrols').grab(previous);
	$('svcontrols').grab(playpause);
	$('svcontrols').grab(next);

	$each(storyviewer_items, function(view, index){
		view.set('id', 'svFx'+(index+1));
		view.set('morph', {	duration: 'long', transition: Fx.Transitions.Quad.easeInOut });
		view.setStyles({position: 'absolute', width: storyviewer_width, left: -storyviewer_width});
		if(index == 0) {
			view.setStyle('left', 0);
		}
	});
	$('svcontrols').setStyle('background-image', 'none');
	
	previous.addEvent('click', function(e){
		e.stop();
		if(storyviewer_paused == 0) {
			$clear(storyviewer_timer);
			storyviewer_timer = storyviewer_nxt.periodical(storyviewer_hold_time);
		}
		storyviewer_prv();
	});
	next.addEvent('click', function(e){
		e.stop();
		if(storyviewer_paused == 0) {
			$clear(storyviewer_timer);
			storyviewer_timer = storyviewer_nxt.periodical(storyviewer_hold_time);
		}
		storyviewer_nxt();
	});
	playpause.addEvent('click', function(e){
		e.stop();
		if(storyviewer_paused == 0) {
			storyviewer_paused = 1;
			$clear(storyviewer_timer);
			this.removeClass('play');
			this.addClass('pause');
		} else {
			storyviewer_paused = 0;
			storyviewer_nxt();
			storyviewer_timer = storyviewer_nxt.periodical(storyviewer_hold_time);
			this.removeClass('pause');
			this.addClass('play');
		}
	});

});
window.addEvent('load', function() {
	if(storyviewer_paused == 0) storyviewer_play();
});