//APPLE STYLE CAROUSEL

function carouselVideoApple( scrollPaneEl, scrollContentEl, containerId ){
	
		var scrollPane = $( scrollPaneEl ),
			scrollContent = $( scrollContentEl );
		//build slider
		var scrollbar = $( containerId + " .handle " ).slider({
			slide: function( event, ui ) {
				if ( scrollContent.width() > scrollPane.width() ) {
					scrollContent.css( "margin-left", Math.round(
						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
					) + "px" );
				} else {
					scrollContent.css( "margin-left", 0 );
				}
			}
		});
		
		//append icon to handle
		handleHelper = scrollbar.find( ".ui-slider-handle " )
		.mousedown(function() {
			scrollbar.width( handleHelper.width() );
		})
		.mouseup(function() {
			scrollbar.width( "100%" );
		})
		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		//alert(handleHelper.toSource());
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css( "overflow", "hidden" );
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar() {
			
			var remainder = scrollContent.width() - scrollPane.width() - 20 ;
			var proportion = remainder / scrollContent.width();
			var handleSize = "50px";
			scrollbar.find( containerId + " .ui-slider-handle " ).css({
				width: handleSize,
				"margin-left": -handleSize / 2
			});
			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
		}

		//reset slider value based on scroll content position
		function resetValue() {
			
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
				parseInt( scrollContent.css( "margin-left" ) );
			var percentage = Math.round( leftVal / remainder * 100 );
			scrollbar.slider( "value", percentage );
		}

		//if the slider is 100% and window gets larger, reveal content
		function reflowContent() {
				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
				var gap = scrollPane.width() - showing;
				if ( gap > 0 ) {
					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
				}
		}

		//change handle position on window resize
		$( window ).resize(function() {
			resetValue();
			sizeScrollbar();
			reflowContent();
		});
		//init scrollbar size
		setTimeout( sizeScrollbar, 10 );//safari wants a timeout
	}

//CALCULATING UL WIDTH FOR SLIDER

function galleryUlSize(imagesNumber , galleryCssWraper ){
	
	var marginLi = $(galleryCssWraper + " ul li").css('margin-right').replace('px','');
	//var imageWidth = $(galleryCssWraper + " ul li img").css('width').replace('px','');
	var imageWidth = 180;
	//alert(marginLi + ' ' + imageWidth );
	var ulWidth = imagesNumber * (parseInt(imageWidth) + parseInt(marginLi));
	$(galleryCssWraper + " ul").css('width',ulWidth + 'px');
	
}

//END CALCULATING UL WIDTH FOR SLIDER 


//APPLE STYLE CAROUSEL



//FUNCTIONS FOR BIG PICTURE PREVIEW WITH THUMB LIST UNDER

function FPRotator( sId, sSelectedClass, iDelay, sStyle ){
	this.sId = sId;
	this.aItems = new Array();
	this.iCurrent = 0;
	this.isRunning = false;
	this.sSelectedClass = sSelectedClass;
	this.iDelay = iDelay;
	this.sStyle = sStyle;
}

FPRotator.prototype.add = function( sId ){
	this.aItems.push( sId );
}

FPRotator.prototype.start = function(){
	this.isRunning = true;
	var _owner = this;
	this.timeout=setTimeout( function(){rotate(_owner)} , _owner.iDelay);
}

FPRotator.prototype.stop = function(){
	clearTimeout( this.timeout );
	this.isRunning = false;
}

FPRotator.prototype.show = function( iCurrent ){

	if ( iCurrent<0 || ( iCurrent>=this.aItems.length) ) iCurrent = 0;
	_item = document.getElementById( this.aItems[this.iCurrent] );
	if ( null != _item ){
		_item.style.display = 'none';
	}

	_item_index = document.getElementById( this.aItems[this.iCurrent] + '_index' );
	if ( null != _item_index ){
		_item_index.className='';
		if ( this.sStyle=="style1") _item_index.style.display = 'block';
	}

	_item = document.getElementById( this.aItems[iCurrent ] );
	if ( null != _item ){
		_item.style.display = 'block';
	}

	_item_index = document.getElementById( this.aItems[iCurrent] + '_index' );
	if ( null != _item_index ){
		_item_index.className=this.sSelectedClass;
		if ( this.sStyle=="style1") _item_index.style.display = 'none';
	}
	this.iCurrent = iCurrent;

}

FPRotator.prototype.go = function( iCurrent ){
	this.show( iCurrent );
	this.stop();
}



function rotate( _owner ){
	if ( !_owner.isRunning ) return;
	$iNewCurrent = _owner.iCurrent+1;
	if ( $iNewCurrent == _owner.aItems.length ) $iNewCurrent = 0;
	_owner.show( $iNewCurrent );
	clearTimeout( _owner.timeout );
	_owner.timeout=setTimeout( function(){rotate(_owner)} , _owner.iDelay );
}


function FPRotatorInitialize( nrEl , idEl, obj ){ 
	for( i=0; i <= nrEl-1; i++ ) {
		obj.add( idEl + i );
	}
}

//END FUNCTIONS FOR BIG PICTURE PREVIEW WITH THUMB UNDER