/*
	rollover/click script
	
	patrick seeburger - unitedguerilla 2005
	www.unitedguerilla.com
	info@unitedguerilla.com
*/

/*
	include the script and just call the function initRollovers
	in your body onload attribute and give the images that you want to
	have the rollover/click effect the class attribute imgrollover.
	
	you can do that by simply adding your image to the class imgrollover.
	your image tag should look something like this :
	<img src="test.jpg" class="imgrollover">
	
	if you want it to act like it was clicked right after the document is
	loaded then it should look like this :
	<img src="test.jpg" class="imgclicked">
	
	in these 2 exmaples above your rollover image should be called test_r.jpg
	you can sepcify another suffix for your rollover images like this
	<body onload="javascript:initRollovers('suffix');>
	if you need a different suffix for your clicked images than you can
	initialize the function like that :
	initRollovers('rolloversuffix','clickedsuffix');
	or just specify an empty rolloversuffix if you want it to be the default
	like this :
	initRollovers('','clickedsuffix');
	
	there are 2 options left. to not collide with your css classes you can
	name the classes for the rollover images and the clicked one like this:
	initRollovers('','','rolloverclassname','clickedclassname');
	
	summary :
	initRollovers('rolloversuffix','clickedsuffix','rolloverclassname','clickedclassname');
*/

function initRollovers( suffix, csuffix, classname, cclassname, dynamic ) {
	if ( !document.getElementById ) return
	
	if ( !suffix ) suffix = '_r';
	if ( !csuffix ) csuffix = suffix;
	if ( !classname ) classname = 'imgrollover';
	if ( !cclassname ) cclassname = 'imgclicked';
	
	var imgAllImages = document.getElementsByTagName('img');
	var imgAllPreLoadr = new Array();
	var imgAllPreLoadc = new Array();
	var imgClicked;
	var clkCounter = 0;
	
	for ( var i = 0; i < imgAllImages.length; i++ ) {
		if ( imgAllImages[i].className == classname || imgAllImages[i].className == cclassname ) {
			var src = imgAllImages[i].getAttribute( 'src' );
			var ftype = src.substring( src.lastIndexOf('.'), src.length );
			var rsrc = src.replace( ftype, suffix+ftype );
			var csrc = src.replace( ftype, csuffix+ftype );
			
			imgAllImages[i].setAttribute( 'osrc', src );
			imgAllImages[i].setAttribute( 'rsrc', rsrc );
			imgAllImages[i].setAttribute( 'csrc', csrc );
			
			if( dynamic ) {
				if( document.URL.indexOf( imgAllImages[i].parentNode.getAttribute( 'href') ) != -1  ) {
					imgAllImages[i].setAttribute( 'src', csrc );
					imgClicked = imgAllImages[i];
				}
			}
			else {
				if( imgAllImages[i].className == cclassname ) {
					if( clkCounter == 0 ) {
						imgAllImages[i].setAttribute( 'src', csrc );
						imgClicked = imgAllImages[i];
						clkCounter++;
					}
					else {
						alert( "Error! Only one image can be defined as clicked.\nImage with name: "+src+" ignored!" );
					}
				}
				
			}

			imgAllPreLoadr[i] = new Image();
			imgAllPreLoadr[i].src = rsrc;
			
			if( csrc != rsrc ) {
				imgAllPreLoadc[i] = new Image();
				imgAllPreLoadc[i].src = rsrc;
			}
			
			imgAllImages[i].onclick = function() {
				if( this != imgClicked ) {
					if( imgClicked ) imgClicked.setAttribute( 'src', imgClicked.getAttribute( 'osrc' ) );
				
					this.setAttribute( 'src', this.getAttribute( 'csrc' ) );
					imgClicked = this;
				}
			}	
			
			imgAllImages[i].onmouseover = function() {
				if ( this != imgClicked ) {
					this.setAttribute( 'src', this.getAttribute( 'rsrc' ) );
				}
			}
			
			imgAllImages[i].onmouseout = function() {
				if ( this != imgClicked ) {
					this.setAttribute( 'src', this.getAttribute( 'osrc' ) );
				}
			}
		}
	}
}
