$(document).ready(function() {
	
	$('#navLeft').css({
		'display' : 'block',
		'float' : 'left',
		'margin' : '0',
		'padding' : '0',
		'width' : '13px'
		
	});
	
	$('#navRight').css({
		'display' : 'block',
		'float' : 'left',
		'margin' : '0',
		'padding' : '0',
		'width' : '13px'
	});
	
	$('#hpiControl').css({
		'display' : 'block',
		'text-align' : 'center',
		'margin-left' : '20px'
	});
	
	$('#hideAll').css({
		'display' : 'none',
		'font-size' : 'xx-small',
		'text-align' : 'center',
		'float' : 'left'
	});
	
	$('#viewAll').css({
		'display' : 'block',
		'font-size' : 'xx-small',
		'text-align' : 'center',
		'float' : 'left'
	});
	
	
	$('#pauseButton').css({
		'display' : 'block',
		'font-size' : 'xx-small',
		'text-align' : 'center',
		'float' : 'left'
	});
	
	
	$('#resumeButton').attr('disabled', 'disabled'); 
	
	
	$('#resumeButton').css({
		'display' : 'block',
		'font-size' : 'xx-small',
		'text-align' : 'center',
		'float' : 'left'
	});
	
	$('#resumeButton').attr('disabled', 'disabled'); 
	$('#pauseButton').removeAttr('disabled'); 
	
	
	$('#hpi-rotate').css({
		'display' : 'block',
		'margin' : '0',
		'overflow' : 'visible',
		'float' : 'left', 
		'height': '70px' ,
		'float' : 'left',
		'margin-left' : '55px'
	});
	
	$('.hpis').css({
		'float' : 'left',
		'height' : '69px',
		'margin' : '0',
		'margin-top' : '1px',
		'overflow' : 'visible',
		'padding' : '0',
		'width' : '160px'
	});
		
	$('.hpi').css({
		'margin-top' : '0px',
		'clear' : 'both'
	});
	
	
  	$('#hpi-rotate').cycle({
	    fx:     'fade',
	    speed:  'fast',
	    timeout: 5000,
	    next:   '#next',
	    prev:   '#prev',
	    pause: 1
	});

	$("#viewAll").click(function(){
		$('#hpi-rotate').cycle('stop'),
		$('#navLeft').css({
			'display' : 'none'
		}),
		$('#navRight').css({
			'display' : 'none'
		}),
		$('#hpi-rotate').css({
			'display' : 'block',
			'margin' : '10px', 
			'overflow' : 'visible', 
			'float' : 'none', 
			'height': 'auto' 
		}),
		$('#viewAll').css({
			'display' : 'none'
		}),
		$('#hideAll').css({
			'display' : 'block',
			'margin-top' : '-25px',
			'margin-left' : '40px'
		}),
		$('.hpi').css({
			'display' : 'block', 
			'position' : 'relative', 
			'z-index' : '0', 
			'opacity' : '1', 
			'margin-bottom' : '10px'
	 	}),
		$('#pauseButton').css({
			'display' : 'none'
		});
		$('#resumeButton').css({
			'display' : 'none'
		});
	 });
 
	$("#hideAll").click(function(){
		$('#hpi-rotate').cycle({
		    fx:     'fade',
		    speed:  'fast',
		    timeout: 5000,
		    next:   '#next',
		    prev:   '#prev',
		    pause: 1
		}),
		
		$('#navLeft').css({
			'display' : 'block'
		}),
		
		$('#navRight').css({
			'display' : 'block'
		}),
		
		$('#hideAll').css({
			'display' : 'none'
		}),
		
		$('#hpi-rotate').css({
			'display' : 'block',
			'margin' : '0',
			'overflow' : 'visible',
			'float' : 'left', 
			'height': '70px' 
		}),
		
		$('#viewAll').css({
			'display' : 'block'
		}),
		
		$('.hpi').css({
			'position' : 'absolute', 
			'top' : '0px', 
			'left' : '0px', 
			'display' : 'none', 
			'z-index' : '5', 
			'opacity' : '0', 
			'width' : '160px', 
			'height' : '70px'
		}),
		$('#pauseButton').css({
			'display' : 'block'
		});
		$('#resumeButton').css({
			'display' : 'block'
		});
		
		$('#resumeButton').attr('disabled', 'disabled'); 
		$('#pauseButton').removeAttr('disabled'); 
		
		
		$('#next').click();
		
	});
	
	$("#pauseButton").click(function(){
		$('#hpi-rotate').cycle('pause'); 
		$('#pauseButton').attr('disabled', 'disabled'); 
		$('#resumeButton').removeAttr('disabled'); 

	});


	$("#resumeButton").click(function(){
		$('#hpi-rotate').cycle('resume'); 
		$('#resumeButton').attr('disabled', 'disabled'); 
		$('#pauseButton').removeAttr('disabled'); 
	});
	
	
 });