var		hasclicked	=	false;

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('domready', function(){
window.addEvent('load', function()	{

	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;	}

/**
 * Created a zslider
 * Expects a number of images with class .theimage in a scrollable div 'theimages'
 * These need to be contained in a div 'zslide_<x>' where x 1 to y
 * Each slide requires two further divs. 'zslide_image_<x>' and 'zscroller_<x>'
 * The image contains the background image and the scroller contains a text block to scroll on
 * 
 * Will create a scroll bar to view all images
 * 
 * @return		Number		Width of all the images
 */



function	initZdisplay()	{

	// Calculate the width of the main zscroll area
	var		vwid	=	0;
	var		cwid	=	0;

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

//	last_image_width	=	cwid;
	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	clearAllSlides()	{
	allSlides.each( xxx );	
}

function	xxx( item )	{	item.xxx();	}

/**
 *
 * @param		String		Source ( image containing )	element base name
 * @param		String		Source ( text containing ) element base name
 * @param		String		Postfix for the two above elements to make a unique id
 *
 * @return		Object		tcZSlideDisplay or Null
 */

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

		var		textele	=	$(dest + pfx);
		if( !textele )	{	return	false;	}

		var	o	=	new	tcZSlideDisplay( source, dest, pfx);
		
		imgele.addEvent( 'click', showtext.create( {arguments : [ o ] } ) );
		textele.addEvent( 'click', hidetext.create( { arguments : [ o ] } ) );
		textele.addEvent( 'mouseover', hibut.create({ arguments : [ o ] }));

		return	o;
}


function	hibut( o )			{	o.hibut();	}
function	lobut( o )			{	o.lobut();	}
function	showtext( o )		{	o.showtext();	}
function	hidetext( o )		{	o.hidetext();	}



function	tcZSlideDisplay(source, dest, n)	{

	this.imgelename		=	source  + n;
	this.textelename	=	dest  + n;
	this.imgele		=	$(this.imgelename);
	this.textele	=	$(this.textelename);

//	this.firsttime	=	true;
	this.scrlname		=	'zscroller_'  + n;
	this.textvisible	=	false;
	this.hs				=	null;

	this.init();
}

tcZSlideDisplay.prototype.scrollInComplete	=	function()	{	this.textvisible	=	true;	}
tcZSlideDisplay.prototype.scrollOutComplete	=	function()	{	this.textvisible	=	false;	}

tcZSlideDisplay.prototype.xxx	=	function()	{	this.hidetext(false);	}


tcZSlideDisplay.prototype.init	=	function()	{

	this.hs	=	new Fx.Slide( 
		this.scrlname, 
		{ 
			mode: 'horizontal'
		}
	);

	this.hs.hide();
	this.textele.set('opacity','.8');  
	this.textele.setStyle( 'visibility', 'visible' );
		
}

tcZSlideDisplay.prototype.hibut	=	function()	{
	this.textele.setStyle( 'background-image' ,'url(/resources/images/closebutton_hi.png)');
}

tcZSlideDisplay.prototype.lobut	=	function()	{
	this.textele.setStyle('background-image' , 'url(/resources/images/closebutton.png)');
}


tcZSlideDisplay.prototype.showtext	=	function()	{

	setHasClicked();

	clearAllSlides();

	if( this.textvisible==false)	{
		this.hs.onComplete	=	this.scrollInComplete.bind(this);
		this.hs.slideIn();
	}

	this.scrollMainDisplay();
}


tcZSlideDisplay.prototype.hidetext	=	function( doscrollto )	{

	setHasClicked();
	if( this.textvisible )	{
		this.hs.onComplete	=	this.scrollOutComplete.bind(this);
		this.hs.slideOut();
	}

	if( doscrollto==true )	{
		this.scrollMainDisplay();
	}
	
	this.lobut();
	
}
tcZSlideDisplay.prototype.scrollMainDisplay	=	function()	{
	
	p	=	this.imgele.getCoordinates(slideContainerName);
	ex	=	p.left - ((1000-(p.width)) / 2);
	x = new Fx.Scroll( scrollTargetName );
	x.onComplete	=	this.scrollMainDisplayComplete.bind(this);
	x.start(ex,0);
}


tcZSlideDisplay.prototype.scrollMainDisplayComplete	=	function()	{

	x 	= 	(-($(scrollTargetName).getCoordinates(outerContainerName).left)) / each_slide_click_advance;
	slider.set( x );
}




function	playvideo( vurl, destid )	{

//	var	dest	=	$(destid);
	var	container	=	$('moviecontainer');
	var	bg			=	$('moviebackground');
	var	dest		=	$('moviearea');
	var	cont		=	$('moviecontrols');


	cont.addEvent( 'click', function(event) { event.stop(); hidevideo(vurl); }  );
 
	bg.set('opacity','.8');  
	container.setStyle( 'display', 'inline' );

	var	hgt		=	300;
	var	wid		=	534;
	var	qt		=	'\
				<object id="themovie" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="' + hgt + '" width="'+wid+'" >\
					<param name="enablejavascript" value="true" />\
					<param name="src" value="'+vurl+'" />\
					<param name="autoplay" value="true" />\
					<param name="controller" value="false" />\
					<embed height="'+hgt+'" pluginspage="http://www.apple.com/quicktime/download/" src="'+vurl+'" type="video/quicktime" width="'+wid+'" controller="false" autoplay="true" enablejavascript="true"></embed> \
				</object>\
	';
	
	
	var	mv		=	new Element( 'div', {});	
	mv.set('html' , qt );

	dest.empty();
	mv.inject( dest );

}


function	hidevideo( vurl)	{

	var	container	=	$('moviecontainer');
	container.setStyle( 'display', 'none' );
	var	dest		=	$('moviearea');
	dest.empty();
	var	cont		=	$('moviecontrols');
	cont.removeEvents('click');

}