//
// Chan.Controls.ImagePanel
//
// Extra script for Image Panels to support image-selection
//

	//
	// Todo : Path and Zoom params will need Base64 encoding and stripping down to 
	// relative paths while we're at it
	//

	//
	// Global array of Drop Down Image Panel JS objects
	//
	var CC_ImagePanel_List = new Array();

	//
	// Drop Down Image Panel
	//
	function CC_ImagePanel( _DIV )
	{
		this.domObject = _DIV;
		this.id = _DIV.id;
		
		this.TargetZoom = document.getElementById( _DIV.getAttribute( "target" ) );
		this.TargetTag = document.getElementById( _DIV.getAttribute( "target" ) + "___Tag" ); 
		this.TargetPath = document.getElementById( _DIV.getAttribute( "target" ) + "___Path" ); 
		
		//so that the imagepanel can postback the selected image to itself
		this.PanelPath = document.getElementById( _DIV.id + "___Path" ); 
		
		//for the dropdown variant
		this.IsDropDown = ( _DIV.getAttribute( "dropdown" ) == "true" );
		this.IMG = document.getElementById( _DIV.id + "___IMG" );		//the "selected" image that we show the user
		this.DDL = null;		//the drop-down-div that we show and hide
			
		//array of images within us
		this.Images = new Array();
		
		//
		this.SelectedImage = null;
		
		//onclick can be a function name set in the aspx tag
		this.onclick = eval( _DIV.getAttribute( "CC_OnClick" ) );
		
		return this;
	}
	
	//
	// Drop Down Image Option
	//
	function C__ImageOption( _IMG )
	{
		this.domObject = _IMG;
		this.Selected = (_IMG.className.indexOf( "Selected" ) > -1);
		this.Path = C__B64Decode( _IMG.getAttribute( "path" ) );
		this.Zoom = C__B64Decode( _IMG.getAttribute( "zoom" ) );
		this.Tag  = _IMG.getAttribute( "tag" );
		this.Alt  = _IMG.getAttribute( "alt" );
		
		return this;
	}

	//
	// Convert noscript scrolling image-selection panels into
	// drop-down-able selection panels after page has loaded
	//
	function CC_ImagePanel_Init()
	{
		var a = document.getElementsByTagName( "DIV" );
		if( a == null )
			return;
			
		var ii = 0;
		var ni = a.length;
		var h = null;
		var hIP = null;
		
		var ij = 0;
		var nj = 0;
		var c = null;
		
		for( ; ii < ni ; ii++ )
		{
			h = a[ii];
			
			if( h.className.indexOf( "CC_ImagePanel" ) < 0 )
				continue;
			
			hIP = new CC_ImagePanel( h );
			CC_ImagePanel_List.push( hIP );
			
			//If this is a scrollable panel we've got the inner div as that's the one with the images in
			c = document.getElementById( h.id + "___Inner" );
			if( c != null )
				h = c;
			
			c = h.childNodes;			
			//if it's a dropdown there will be a table and a div to contend with
			//before we get to the images
			if( hIP.IsDropDown )
			{
				if( c == null || c.length < 1 )
					continue;				
					
				ij = 0;
				nj = c.length;
				
				for( ; ij < nj ; ij++ )
				{
					//the inner div is rejigged to act as the drop-down itself
					if( c[ij].tagName == "DIV" )
					{
						hIP.DDL = c[ij];
						
						c[ij].style.width = (h.clientWidth - 2) + "px";		//compensate for border width
						c[ij].style.border = "1px solid #666";
						c[ij].style.position = "absolute";
						c[ij].style.backgroundColor = "#FFF";
						c[ij].style.display = "none";
						c[ij].id = h.id + "___DDL";
						c[ij].top = "2px";
						c[ij].style.height = ((h.clientHeight < 67) ? (h.clientHeight * 3) : 200) + "px";		//never taller than 200px
					}
					else
					//the TABLE is declared disply:none inline for noscript - remove that
					if( c[ij].tagName == "TABLE" )
					{
						c[ij].style.display = "";
						
						c[ij].style.backgroundColor = "#FFF";
						//c[ij].style.height = h.clientHeight + "px";
						
						c[ij].getElementsByTagName( "TH" )[0].style.backgroundImage = "URL(" + C__Chan_Root + "/SS0.gif)";
					}
				}

				//
				// Now harvest the children in the drop down
				//
				if( hIP.DDL == null )
					continue;
					
				c = hIP.DDL.childNodes;
		
			}
			
			
			if( c == null || c.length < 1 )
				continue;
			
			ij = 0;
			nj = c.length;
			
			for( ; ij < nj ; ij++ )
			{
				if( c[ij].tagName == "INPUT" || c[ij].tagName == "IMG" )
				{
					hIP.Images.push( new C__ImageOption( c[ij] ) );
					
					//currently selected?
					if(c[ij].className.indexOf( "Selected" ) > -1 )
						hIP.SelectedImage = c[ij];
					
					//if this is a scrollable panel make sure the selected image is in view
					//if( !hIP.IsDropDown && hIP.Images[ hIP.Images.length-1 ].Selected )
					//{
					//	h.style.top = "-" + c[ij].offsetTop + "px";
					//	h.style.left = "-" + c[ij].offsetLeft + "px";
					//}
				}
			}			
		}
	}

	//
	// Show/Hide the Drop Down image list
	//
	function CC_ImagePanel_Toggle( id )
	{
		var h = document.getElementById( id );
		if( h == null )
			return;
			
		h.style.display = (h.style.display == "block") ? "none" : "block";
	}
	
	
	//
	// User clicked on an image in the drop-down list, select it
	// and perform any highligting and Target action while we're
	// at it
	//
	function CC_ImagePanel_Select( id , hImg )
	{
		var h = document.getElementById( id );
		if( h == null )
			return;
		
		var ii = 0;
		var ni = CC_ImagePanel_List.length;
		
		//find the list's complimentary JS object
		for( ; ii < ni ; ii++ )
		{
			if( CC_ImagePanel_List[ii].domObject == h )
			{
				h = CC_ImagePanel_List[ii];
				break;
			}
		}
		
		//bad juju!
		if( ii == ni )
			return;
	
		//drop-down select
		if( h.IsDropDown )
		{
			//hide the drop down list
			h.DDL.style.display = "none";
		
			//set the dummy "selected image" to look like the one we clicked on
			h.IMG.src = hImg.src;
		}
		
		//flag up our selected image
		h.SelectedImage = hImg;

		ii = 0;
		ni = h.Images.length;
		
		//find the clicked-image's complimentary JS object
		for( ; ii < ni ; ii++ )
		{
			if( h.Images[ii].domObject == hImg )
			{
				//highlight the selected image
				h.Images[ii].domObject.className += " Selected";
				
				//got a target image?
				if( h.TargetZoom != null )
					h.TargetZoom.src = h.Images[ii].Zoom;

				//got a target image tag
				if( h.TargetTag != null )
					h.TargetTag.value = h.Images[ii].Tag;
					
				//this is not a target it's the actual DDL remembering its currently selected image for postback
				if( h.TargetPath != null )
					h.TargetPath.value = C__B64Encode( h.Images[ii].Path );
					
				//this is not a target it's the actual DDL remembering its currently selected image for postback
				if( h.PanelPath != null )
					h.PanelPath.value = C__B64Encode( h.Images[ii].Path );
				
			}
			else
			{
				//remove any highlighting from the not-selected images
				h.Images[ii].domObject.className = h.Images[ii].domObject.className.replace( / *Selected */g , "" );
			}
		}
		
		//call the onclick with a reference to the panel itself
		if( h.onclick )
			h.onclick( h );
	}