var minFilmStripWidth	= 232
var availableWidth		= 0

var totalImages			= 0;
var singleLineImages	= 8;
var leftMovable			= 0;
var rightMovable		= 0;
var ulLeftPosition		= 0;
var singleStepDistance	= 76;
var movingSpeed			= 500


//Portfolio filmstrip rollover
$(function(){
	$("div#imageGallery ul > li > a").mouseover(function(){
		$("div#imageGallery > div:has(p)").attr("style","display:none");		
		$("div#igFull" + $(this).attr("id").replace("igThumb", "")).attr("style","display:block;");
		
	}).mouseout(function(){
	});
	
	setUpFilmStrip()
})

function setUpFilmStrip(){
	
	if( jQuery.browser.msie ){
		$('div#imageGallery div p img').css({ margin : '15px 15px 0 0' })
		$('div#imageGallery div p img').attr('hspace', 0)
	}
	else $('div#imageGallery div p img').css({ margin : '0 15px 0 0' })
	
	$('div#imageGallery > ul').wrap('<div id="filmStripUlWrapperDiv2" style="display:block"></div>')
	$('div#imageGallery ul').wrap('<div id="filmStripUlWrapperDiv1" style="display:block"></div>')

	$('div#imageGallery ul').css({ marginLeft : 0, position : 'absolute', left : 0, display : 'block' })
	
	/* SETTING UP LEFT ARROW */
	$('div#filmStripUlWrapperDiv2').append('<span id="leftArrow"></span>')
	$('#leftArrow').css({ width : 32, height : 32, position:'absolute', zIndex : 9999, left : 6, top : 32, display : 'block', cursor : 'pointer', background: 'url(../images/jCarouselPrev.gif) no-repeat -96px 0px', overflow : 'hidden' })
	
	// Left Arrow Hover, Mouse Down and Mouse Up Effects
	$('#leftArrow').hover(
		function(){
			if( leftMovable != 0 ){
				$('#leftArrow').css({ backgroundPosition : '-32px 0px' })
			}
		},
		function(){
			if( leftMovable != 0 ){
				$('#leftArrow').css({ backgroundPosition : '0px 0px' })
			}
		}
	)
	$('#leftArrow').mousedown( function(){
		if( leftMovable != 0 ){
			$('#leftArrow').css({ backgroundPosition : '-64px 0px' })
		}
	})
	// Left Arrow Hover, Mouse Down and Mouse Up Effects
	
	/* SETTING UP RIGHT ARROW */
	$('div#filmStripUlWrapperDiv2').append('<span id="rightArrow"></span>')
	$('#rightArrow').css({ width : 32, height : 32, position:'absolute', right : 6, top : 32, display : 'block', cursor : 'pointer', background: 'url(../images/jCarouselNext.gif) no-repeat -96px 0px' })
	
	// Right Arrow Hover, Mouse Down and Mouse Up Effects
	$('#rightArrow').hover(
		function(){
			if( rightMovable != 0 ){
				$('#rightArrow').css({ backgroundPosition : '-32px 0px' })
			}
		},
		function(){
			if( rightMovable != 0 ){
				$('#rightArrow').css({ backgroundPosition : '0px 0px' })
			}
		}
	)
	$('#rightArrow').mousedown( function(){
		if( rightMovable != 0 ){
			$('#rightArrow').css({ backgroundPosition : '-64px 0px' })
		}
	})
	// Right Arrow Hover, Mouse Down and Mouse Up Effects
	
	
	// LeftArrow Click event
	$('#leftArrow').click( function(){
		if( leftMovable != 0 ){
			moveIt( 'right' )
		}
		else return false;
	})
	
	$('#rightArrow').click( function(){
		if( rightMovable != 0 ){
			moveIt( 'left' )
		}
		else return false;
	})
	
	setupWidthOftheFilmStrip()

}



function setupWidthOftheFilmStrip(){

	totalImages		= $('div#imageGallery ul li').length
	rightMovable	= ((totalImages - singleLineImages) > 0 ) ? (totalImages - singleLineImages) : 0

	$('div#imageGallery ul').width( (totalImages * 76) )
	
	if( rightMovable > 0){
		makeBtnActive ( 'right' , rightMovable )
	}
	
}

function makeBtnActive ( whichBtn, moveStepsAvailable){
	if ( whichBtn == 'left' ){
		$('#leftArrow').css({ backgroundPosition : '0px 0px' })
		leftMovable = moveStepsAvailable
	}
	else{
		$('#rightArrow').css({ backgroundPosition : '0px 0px' })
		rightMovable = moveStepsAvailable
	}
}

function makeBtnInactive( whichBtn ){
	if( whichBtn == 'left' ){
		$('#leftArrow').css({ backgroundPosition : '-96px 0px' })
		leftMovable = 0;
	}
	else{
		$('#rightArrow').css({ backgroundPosition : '-96px 0px' })
		rightMovable = 0;
	}
}

function moveIt( whichDirection ){
	if( whichDirection == 'left'){
		ulLeftPosition-= singleStepDistance
		$('div#imageGallery ul').animate( {left : ulLeftPosition }, movingSpeed, function(){
			makeBtnActive ( 'left' , ++leftMovable );
			})
		
		rightMovable-=1
		
		if( rightMovable <= 0 ){
			makeBtnInactive( 'right')
		}
	}
	else{
		ulLeftPosition+= singleStepDistance
		$('div#imageGallery ul').animate( {left : ulLeftPosition }, movingSpeed, function(){
			makeBtnActive ( 'right' , ++rightMovable );
			})
		
		leftMovable-=1
		
		if( leftMovable <= 0 ){
			makeBtnInactive( 'left')
		}
	}
}