var vwt = vwt ? vwt : { };
vwt.widgets = vwt.widgets ? vwt.widgets : { };

vwt.widgets.ImageViewer = function( ) {
        var p_listElementArray = false;
	var p_initImageViewer = function( listElement ) {
		var childNodes = listElement.getElementsByTagName( 'LI' );
		YAHOO.util.Event.addListener( childNodes, 'click', p_focusImage );		
		for( var i = 1; i < childNodes.length; i++ ) {
			YAHOO.util.Event.addListener( childNodes[i], 'mousemove', p_startAnimImage );		
			YAHOO.util.Event.addListener( childNodes[i], 'mouseout', p_stopAnimImage );
		}		
		p_imageSizeIdHash[listElement.id] = { large : document.getElementById( listElement.id + '-large-size-id' ).value,
						      small : document.getElementById( listElement.id + '-small-size-id' ).value };
	};
	var p_startAnimImage = function( e ) {
		if( !this.anim ) {
			this.anim = true;
			var fadeOut = new YAHOO.util.Anim(this, { opacity: { from: 1, to: 0.5 } }, 0.25 );
			fadeOut.animate();
		}
	};

	var p_stopAnimImage = function( e ) {
		var xy = YAHOO.util.Event.getXY( e );
		var region = YAHOO.util.Dom.getRegion( this );
		var el = this;
		setTimeout( function( ) {
			if( !(xy[0] >= region.left &&
			    xy[0] <= region.right &&
			    xy[1] >= region.top &&
			    xy[1] <= region.bottom) ) {
				el.anim = true;
				var fadeIn = new YAHOO.util.Anim(el, { opacity: { from: 0.5, to: 1 } }, 0.25 );
				fadeIn.onComplete.subscribe( function() { 
					el.anim = false;
				} );
				fadeIn.animate();
			}
		}, 50 );
	};
	var p_imageSizeIdHash = {};
	var p_transactionInProgress = false;
	var p_focusImage = function( e ) {
		if( p_transactionInProgress ) {
			return;
		}
		p_transactionInProgress = true;
		
		var index = p_getIndex( this );
		if( index == 0 ) {
			var shiftAmount = -1;
		} else {
			var shiftAmount = -index;
		}
		var listElementId = this.parentNode.id;
		var nodeList = this.parentNode.getElementsByTagName( 'LI' );
		var previousNodes = [];
		for( var i = 0; i < nodeList.length; i++ ) {
			var firstChild = nodeList[i].getElementsByTagName( 'DIV' )[0];
			var clone = firstChild.cloneNode( true );
			var newIndex = i + shiftAmount;
			if( newIndex < 0 ) {
				newIndex += nodeList.length;
			}

			var imgEl = clone.getElementsByTagName( 'IMG' )[0];
			if( newIndex == 0 ) {
				imgEl.src = imgEl.src.replace( p_imageSizeIdHash[listElementId].small, p_imageSizeIdHash[listElementId].large );
			} else {
				imgEl.src = imgEl.src.replace( p_imageSizeIdHash[listElementId].large, p_imageSizeIdHash[listElementId].small );
			}
			previousNodes[i] = firstChild;
			var fadeOut = new YAHOO.util.Anim(previousNodes[i], { opacity: { from: 1, to: 0 } }, 0.25 );
			fadeOut.onComplete.subscribe( function() { 
				for( var i = 0; i < previousNodes.length; i++ ) {
					previousNodes[i].parentNode.removeChild( previousNodes[i] );
				}
				p_transactionInProgress = false;
			} );

			YAHOO.util.Dom.setStyle( clone, 'opacity', 0 );
			nodeList[newIndex].appendChild( clone );	
			var fadeIn = new YAHOO.util.Anim(clone, { opacity: { from: 0, to: 1 } }, 0.25 );

			fadeIn.animate( );
			fadeOut.animate( );
		}
		
	};
	var p_getIndex = function(el) 
	{ 
	    var nodes = el.parentNode.childNodes, node; 
	    var i = index = 0; 
	    while( (node=nodes.item(i++)) && node!=el ) { 
		if( node.nodeType==1 ) {
			index++; 
		}
	    }
	    return index;
	};
        return {
		anim: false,
                init: function( ) {
                        if( p_listElementArray === false ) {
				p_listElementArray = YAHOO.util.Dom.getElementsByClassName( 'vwt-image-viewer', 'OL' );
				for( var i = 0; i < p_listElementArray.length; i++ ) {
					p_initImageViewer( p_listElementArray[i] );
				}
                        }
                }
        }
}();

YAHOO.util.Event.onDOMReady( vwt.widgets.ImageViewer.init );