////IMG to FLASH Explanation////

/**********************************************************\


    All flash should be placed into the appropriate
	folder.  The naming convention is always:
	
	    movieN.swf
		
		***where N = a numeral, id, etc.
		
	That numeral will be used as such:
	
	<div id="testImg_1" class="clickToFlash">
        <img src="test1.png" />
	</div>

    Notice the '1'?  This is the id/numeral/etc of
	the movie which is named movie1.swf
	
	On page load, the script finds the appropriate
	class of the divs for the image to flash script, 
	and then assigns it the event to switch the image
	with the flash file on quick.

\*********************************************************/


    function alterIt(id){
	
	    //we will pull a AJAX call here to get the movie so as to not hard code it
		// ....for now.....
		var retStr = "<iframe style=\"margin:0;padding:0;border:5px solid #005d97;\" frameborder=\"0\" border=\"0\" width=\"598px\" height=\"340px\" class=\"iframecall\" src=\"/movie.php?id="+id+"\" />"

		$("testImg_"+id).innerHTML = retStr;
		
		//setTimeout(function(){
							
			   // $("testImg_"+id).innerHTML = "<img src=\"images/tour/overview.jpg\" width=\"621\" height=\"319\" alt=\"Uploading\" class=\"border\" />";
							
							//},"70000");
		
		////the above is good, but only if we use a lookup table for the ids for the returned image in the end.
	
	}
	
	function setupPage(){
	
	    $$("div.clickToFlash").each(function(c){
		
		    var r=c.id.match(/\d+/);
		
		    $(c).onclick=function(){
			    alterIt(r[0]);
			}
		    
		});
	
	}

function swapTourImage(id, newImg)
{
	document.getElementById(id).src = '/images/tour/' + newImg;
}

    Event.observe(window, "load", setupPage);