<?php

include_once "pagelist.inc";

$imgbrwsr_content_counter = 0;

function imgbrwsr_content($ndx = 0, $imgs)	{
	global $imgbrwsr_content_counter, $intemplate, $content;
	$output = "";
	if (!$imgbrwsr_content_counter)	{
		$output .= "
<script type='text/javascript'>
	function imgbrwsr_content_update()  {

		link = document.getElementById(this.element.id+'_link');
		link.href = this.images[this.index][0];
		link.title = this.images[this.index][1];

		img = document.getElementById(this.element.id+'_image');
		img.src = 'images/placeholder.gif';
		img.src = this.images[this.index][3];
		img.alt = this.images[this.index][1];

		for (i = 0; i < this.images.length; ++i)  {
			document.getElementById(this.element.id+'_text_'+i).style.display = (i == this.index)? 'block': 'none';
		}

		document.getElementById(this.element.id+'_view').href = this.images[this.index][2]

		if (this.index == 0 || this.images.length == 0)	{
			document.getElementById(this.element.id+'_frst').style.display = 'none';
			document.getElementById(this.element.id+'_back').style.display = 'none';
		} else {
			document.getElementById(this.element.id+'_frst').style.display = 'block';
			document.getElementById(this.element.id+'_back').style.display = 'block';
		}
		if (this.index == this.images.length - 1 || this.images.length == 0)	{
			document.getElementById(this.element.id+'_next').style.display = 'none';
			document.getElementById(this.element.id+'_last').style.display = 'none';
		} else {
			document.getElementById(this.element.id+'_next').style.display = 'block';
			document.getElementById(this.element.id+'_last').style.display = 'block';
		}
	}
	function imgbrwsr_content_goto(imgno)	{
		while (imgno < 0)
			imgno += this.images.length;
		if (imgno >= this.images.length)
			imgno %= this.images.length;
		this.index = imgno;
		this.update();
	}
	function imgbrwsr_content_offset(off)	{
		this.go(this.index+off);
	}
	function imgbrwsr_content_expand()   {
		expand = document.getElementById(this.element.id+'_expand');
		expandimg = document.getElementById(this.element.id+'_expand_img');
		textdiv = document.getElementById(this.element.id+'_text');
		buttondiv = document.getElementById(this.element.id+'_text_buttons');
		if (textdiv.style.display == 'none')    {
			this.element.style.width = '695px';
			this.element.style.background = 'url(/images/imgbrwsr/frame_expanded_buttons.png)';
			textdiv.style.display = 'block';
			buttondiv.style.display = 'block';
			expand.title = 'Hide the content panel';
			expandimg.src = '/images/imgbrwsr/close.png';
                } else  {
			buttondiv.style.display = 'none';
			textdiv.style.display = 'none';
			this.element.style.background = 'url(/images/imgbrwsr/frame.png)';
			this.element.style.width = '358px';
			expand.title = 'Show the content panel';
			expandimg.src = '/images/imgbrwsr/open.png';
		}
	}
	var imgbrwsr_contents = new Array();
	function imgbrwsr_content(element, ndx, imgs)   {
		this.id     = imgbrwsr_contents.length;
		this.element= element;
		this.index  = ndx;
		this.images = imgs;
		this.go     = imgbrwsr_content_goto;
		this.offset = imgbrwsr_content_offset;
		this.update = imgbrwsr_content_update;
		this.expand = imgbrwsr_content_expand;
		imgbrwsr_contents[this.id] = this;
		document.getElementById(this.element.id+'_frst').href = 'javascript:imgbrwsr_contents['+this.id+'].go(0);';
		document.getElementById(this.element.id+'_back').href = 'javascript:imgbrwsr_contents['+this.id+'].offset(-1);';
		document.getElementById(this.element.id+'_next').href = 'javascript:imgbrwsr_contents['+this.id+'].offset(1);';
		document.getElementById(this.element.id+'_last').href = 'javascript:imgbrwsr_contents['+this.id+'].go(-1);';
		document.getElementById(this.element.id+'_expand').href = 'javascript:imgbrwsr_contents['+this.id+'].expand();';
	}
</script>
";
	}

	$id = $imgbrwsr_content_counter;
	++$imgbrwsr_content_counter;

	$output .= "
<div id='imgbrwsr_content{$id}' style='width:695px; height:312px; position:relative; background:url(/images/imgbrwsr/frame_expanded_buttons.png);'>
	<a id='imgbrwsr_content{$id}_link' style='position:absolute; left:19px; top:20px; display:block;'><img id='imgbrwsr_content{$id}_image' src='images/placeholder.gif' lowsrc='images/placeholder.gif' style='width:320px; height:240px; border:none;' /></a>
	<div id='imgbrwsr_content{$id}_text' style='position:absolute; left:354px; top:19px; width:320px; height:240px; overflow:auto; display:block;'>
";

	$intemplatetmp = $intemplate;
	$contenttmp = $content;
	$intemplate = TRUE;
	$i = 0;
	foreach ($imgs as $value)	{
		$content = "";
		@include getpage($value[2]);
		$output .= "<div id='imgbrwsr_content{$id}_text_{$i}' style='display:none;'>{$content}</div>";
		++$i;
	}
	$intemplate = $intemplatetmp;
	$content = $contenttmp;

	$output .= "
	</div>
	<a id='imgbrwsr_content{$id}_frst' title='Go to the first image'    style='position:absolute; left: 11px; top:266px;'><img src='/images/imgbrwsr/first.png' style='border:none;' alt='first' /></a>
	<a id='imgbrwsr_content{$id}_back' title='Go to the previous image' style='position:absolute; left: 55px; top:266px;'><img src='/images/imgbrwsr/back.png'  style='border:none;' alt='back'  /></a>
	<a id='imgbrwsr_content{$id}_next' title='Go to the next image'     style='position:absolute; left:271px; top:266px;'><img src='/images/imgbrwsr/next.png' style='border:none;'  alt='next'  /></a>
	<a id='imgbrwsr_content{$id}_last' title='Go to the last image'     style='position:absolute; left:303px; top:266px;'><img src='/images/imgbrwsr/last.png' style='border:none;'  alt='last'  /></a>
	<a id='imgbrwsr_content{$id}_expand' title='Hide the content panel' style='position:absolute; left:343px; top:129px;'><img id='imgbrwsr_content{$id}_expand_img' src='/images/imgbrwsr/close.png' style='border:none;' /></a>
	<div id='imgbrwsr_content{$id}_text_buttons' style='display:block;'>
		<a id='imgbrwsr_content{$id}_view' title='View text' style='position:absolute; left:344px; top:270px;'><img src='/images/imgbrwsr/view.png' style='border:none;' alt='view' /></a>
	</div>
</div>
<script type='text/javascript'>
	(new imgbrwsr_content(document.getElementById('imgbrwsr_content{$id}'), {$ndx}, new Array(";

	$i = 0;
	foreach ($imgs as $value)	{
		if ($i)	$output .= ",";
		$output .= "new Array('{$value[0]}', '{$value[1]}', '".getlink($value[2])."', '{$value[3]}')";
		++$i;
	}

	$output .= "))).update();
</script>";

	return $output;
}

?>
