var		hasclicked	=	0;
var		_curr	=	0;
var		scrollspeed	=	7;

var		slider_steps	=	500;
var		display_width	=	1000;
var		outerContainerName	=	'zdisplayarea';
var		scrollTargetName	=	'zcontainer';
var		slideContainerName	=	'theimages';

var		allSlides			=	Array();
var		slider				=	null;
var		width_of_all_images			=	0;
var		each_slide_click_advance	=	0;
var	sm	=	0;


window.addEvent('load', function()	{

	if( $(slideContainerName))	{
		width_of_all_images			=	initZdisplay();
		var		scroll_width		=	width_of_all_images	-	display_width;
		each_slide_click_advance	=	scroll_width / slider_steps;
		var slider_el				=	$('zslider');
		var	knob_el					=	slider_el.getElement('.knob');
	
		slider		=	new Slider( slider_el, knob_el, {
				steps: slider_steps,
				range: [0],
	
				onChange: function( value )	{
					newx	=	each_slide_click_advance * value;
					x = new Fx.Scroll(scrollTargetName).set( newx, 0);
					sm++;
				},
				
				onComplete : function()	{
					if( sm==1)	{
					}
					sm = 0;
				}
			}).set(0);
			
		knob_el.addEvent( 'mousedown', function() { setHasClicked(); } );
		slider_el.addEvent( 'mousedown', function() { setHasClicked(); } );
	}			
}); 


function	setHasClicked()	{	hasclicked	=	true;	}
function	getHasClicked()	{	return	hasclicked;	}

/**
 * 
 * @return		Number		Width of all the images
 */

function	initZdisplay()	{

	// Calculate the width of the main zscroll area

// NOTE - IF THERE IS ANY MARGIN ON the img or other tags then some adjustment will be required
//	var	extra_margin_per_image	=	0;	


	var		vwid	=	0;
	
	$$('.theimage').each( 
		function( el )	{
			x	=	el.getSize().x;
			vwid += x;
		}
	);

	$(slideContainerName).setStyle('width', vwid);
	
	
	allSlides		=	[];

	$(slideContainerName).setStyle('width', vwid);
	for(i=1; i<100; i++)	{
		var	o	=	initZSlide( 'zslide_image_', 'zslide_',  i);
		if( !o)	{
			break;
		}
		allSlides[i-1]	=	o;
	}
	
	return		vwid;
}


function	initZSlide( source, dest, pfx )	{
		
		var		imgele	=	$(source + pfx);
		if( !imgele )	{	return	false;	}

		var	o	=	new	tcZSlideDisplay( source, dest, pfx);
		imgele.addEvent( 'click', clickedOnFrame.create( {arguments : [ o ] } ) );
		return	o;
}




function	clickedOnFrame( o )		{	o.clickedOnFrame();	}
function	hibut( o )			{	o.hibut();	}
function	lobut( o )			{	o.lobut();	}

function	tcZSlideDisplay(source, dest, n)	{
	this.elenum			=	n;
	this.imgelename		=	source  + n;
	this.imgele		=	$(this.imgelename);
}


tcZSlideDisplay.prototype.clickedOnFrame	=	function()	{
	ss.showframe( this.elenum-1 );
}