var viewportid;
var viewportmenuitemclass;
var viewportpages;
var viewportwidth;
var viewportheight;

function CreateViewport( vpid, vpmenuclass, width, height ) {
	viewportpages = new Array();

	viewportid = '#' + vpid;
	viewportmenuitemclass = '.' + vpmenuclass;
	viewportwidth = width;
	viewportheight = height;

	// set properties
	jQuery( viewportid ).css( 'width', viewportwidth );
	jQuery( viewportid ).css( 'height', viewportheight );
	jQuery( viewportid ).css( 'position', 'relative' );
	jQuery( viewportid ).css( 'overflow', 'hidden' );

	// fill array of pages from viewportmenuitem class
	jQuery( viewportmenuitemclass ).each( function( key, elm ) {
		// add function
		jQuery( elm ).bind('click', function() {
			jQuery( ".viewportmenuitem" ).removeClass( "active" );
			jQuery( elm ).addClass( "active" );
			MoveViewport( key );
		});
		// assign page to array element
		viewportpages[ key ] = jQuery( elm ).attr( 'content' );
	} );

	// create viewportpages container
	var totalwidth = viewportwidth * viewportpages.length;
	jQuery( '#viewport' ).append( '	<div id="viewportpages" style="border: none; background-color: transparent; position: relative; width: ' + totalwidth + 'px ! important; top: 0px;margin:0px; padding:0px;"></div>' );

	// create viewport pages
	var s = '<table cellspacing=0 cellpadding=0><tr>';
	for ( i in viewportpages ) {
		s += '<td valign="top" class="viewportpage" id="page_' + i + '" style="width:' + viewportwidth + 'px;"></td>';
	}
	s += '</tr></table>';
	jQuery( '#viewportpages' ).append( s );
	//jQuery( '#viewportpages' ).css( 'width', viewportwidth + 'px' );

	// load pages
	for ( i in viewportpages ) {
		//alert( "loading #page_" + i + ": " + viewportpages[ i ] );
		jQuery( '#page_' + i ).load( viewportpages[ i ] );
	}

}

function MoveViewport( pos ) {
	var x = ( pos ) * viewportwidth * -1;

	//jQuery( '#viewportpages' ).animate( { left: x }, 1000 );
	jQuery( '#viewportpages' ).animate( { left: x }, 1500 );
	//jQuery( '#viewportpages' ).css( 'left', x );

	var p = jQuery( '#viewportpages' ).position();
}