AC_FL_RunContent = 0;
var clipWidth = 194;

addEvent( "domready", function() {
	if( $('clipnavi') ) initClipnavi();
	
} );

function initClipnavi() {
	
	if( Cookie.read("clipnavi") == "hidden" ) {
		$('clipnavi').addClass('closed');
		$('clipnavitoggle').addClass( 'close' );
		$$('#clipnavi .content')[0].setStyle('opacity', "0");
	}
	else {
		$$('#clipnavi .openheader')[0].setStyle('opacity', "0");
	}
	
	$$('#clipnavitoggle', '#clipnavi H3').addEvent('click', function() {
		$('clipnavi').setStyle( "height", $('clipnavi').getSize().y );
		// Open clips
		if( $('clipnavi').hasClass( 'closed' ) ) {
			$('clipnavi').removeClass( 'closed' );
			this.removeClass( 'close' );
			$('clipnavi').tween( 'height', $$('#clipnavi .content')[0].getSize().y );
			$$('#clipnavi .openheader')[0].tween( 'opacity', 0 );
			$$('#clipnavi .content')[0].tween( 'opacity', 1 );
			var clipCookie = Cookie.write('clipnavi', 'open', { path: "/", duration: "100" });
		}
		// Close clips
		else {
			this.addClass( 'close' );
			$('clipnavi').addClass( 'closed' );
			$$('#clipnavi .openheader')[0].tween( 'opacity', 1 );
			$$('#clipnavi .content')[0].tween( 'opacity', 0 );
			$('clipnavi').tween( 'height', 47 );
			var clipCookie = Cookie.write('clipnavi', 'hidden', { path: "/", duration: "100" });
		}
	} );
	
	// Set real width for the clip divs
	var clips = $$('#clipnavi .clips');
	for( i = 0; i < clips.length; i++ ) {
		clips[i].onPage = 0;
		clips[i].pages = Math.floor( clips[i].getChildren().length / 4 );
		clips[i].setStyle( 'width', clips[i].getChildren().length * clipWidth );
	}
	
	// Key back and forward buttons
	var newer = $$('#clipnavi .newer');
	var older = $$('#clipnavi .older');
	for( i = 0; i < older.length; i++ ) {
		newer[i].scroller	= newer[i].getNext( '.scroller' ).getFirst();
		newer[i].pair = older[i];
		newer[i].direction = 1;
		newer[i].addEvent('click', scrollClips );
		newer[i].setStyle('opacity', 0.3 );

		older[i].scroller	= older[i].getNext( '.scroller' ).getFirst();
		older[i].pair = newer[i];
		older[i].direction = -1;
		older[i].addEvent('click', scrollClips );
	}
}

function scrollClips( e ) {
	btn = e.target;
	if( btn.getStyle('opacity') == 1 ) {
		btn.scroller.onPage += 1 * btn.direction;
		btn.scroller.tween( 'margin-left', btn.scroller.onPage * clipWidth * 4 );
		// Deactivate buttons when reaching the ends
		if( btn.scroller.onPage * -1 == btn.scroller.pages && btn.direction == -1 || btn.scroller.onPage == 0 && btn.direction == 1 ) {
			btn.tween( 'opacity', 0.3 );
		}
		btn.pair.tween( 'opacity', 1 );
	}
}