/** *****************************************************************************************
 * @description: General JavaScript Class kjf-hei.de
 * @author: Sebastian Martens
 * @copyright: (c) Sebastian Martens 2009
 * @svn: $Id: kjfScripts.js 163 2009-11-27 20:18:17Z dinnerout $
 * @uses: Dojo-Toolkit (dojotoolkit.org)
 ** *****************************************************************************************/
 
/** *****************************************************************************************
 * @class KJFImageSwitcher																		
 * @classdescription builds an list of images with hover effect
 * @param obj Object obj.id - id of image list container
 					 obj.images - array of pahtes to images
 					 obj.actionURI - url for ajax request to get image list
 ** *****************************************************************************************/
dojo.declare("KJFImageSwitcher", null, {															

	id:'',
	node: null,
	actionURI: '',
	images: null,
	imageCount: 5,
	imageBoxes: null,
	imageBoxClass:'kjfImageSwBox',
	imageBoxCloseClass:'kjfImageClose',
	lockLayerClass: 'kjfImageSwitcherLock',
	hideClass: 'hide',
	index: 0,
	hightLightTimer: 3000,
	varName: '',
	animationDuration: 800,
	animationEndHeight: 20,
	running: false, 
	isStopped: false,
	
	/**
	 * @constructor
	 * @param obj Object - configuration parameter
	 */
	constructor:function( obj ){
		var cnt;
		dojo.mixin(this,obj);
		if( this.id && this.id!='' ){
			this.node = dojo.byId( this.id );
			if( !this.node ){
				return false;
			}
			cnt = dojo.attr( this.node, 'imageCount' );
			this.imageCount = cnt?cnt:this.imageCount;
			this.imageBoxes = [];
			this.buildImageList();
		}else return false;
 	},
 	
 	/**
 	 * manage list building depending on image list source
 	 */
	buildImageList: function(){
		if( this.images && this.images.length>0 ){
			// build from given list
			this.buildImageFromLocalList();
		}else{
			// send ajax request to get list
			if(this.actionURI!='') this._sendRequest('getImageList');
		}
	},
	
	/**
	 * starts timer function to open the next switch image in line 
	 */
	startTimer: function(){
		if( !this.running ){
			eval( 'window.setTimeout("'+this.varName+'.highLightNext()", '+this.hightLightTimer+')' );
			this.running = true;
		}
	},
	
	/**
	 * opens the next switch image in line
	 */
	highLightNext: function(){
		this.running = false;
		if( this.isStopped ){
			return false;
		}
		this.index = ((this.index+1)>=this.imageBoxes.length)?0:(this.index+1);
		this.animationStartHandler( {'currentTarget':this.imageBoxes[ this.index ] } );
		this.startTimer();
	},
	
	/**
	 * adds height limiting class to all image boxes
	 */
	closeAllImages: function(){
		for( var i=0; i<this.imageBoxes.length; i++){
			// dojo.addClass( this.imageBoxes[i], this.imageBoxCloseClass );
			dojo.animateProperty({	node: this.imageBoxes[i],
									duration: this.animationDuration,
									properties: {
										width: {  end:this.animationEndHeight, unit:'px' }
									}
								}).play();
		}
	},
	
	/**
	 * mouse over handler for image box. removes height limiting class
	 * @param Event evt - mouse over event
	 */
	mouseOverHandler: function( evt ){
		this.animationStartHandler( evt );
		this.isStopped = true;
	},
	
	/**
	 * 
	 * @param evt
	 * @returns
	 */
	mouseOutHandler: function( evt ){
		this.isStopped = false;
		this.startTimer();
	},
	
	animationStartHandler: function( evt ){
		this.closeAllImages();
		var imgN = dojo.query( 'img', evt.currentTarget );
		dojo.animateProperty({	node: evt.currentTarget,
									duration: this.animationDuration,
									properties: {
										width: {  end:imgN[0].width, unit:'px' }
									}
								}).play();
		// dojo.removeClass( evt.currentTarget, this.imageBoxCloseClass );
		// this.positionUnLockLayer( evt.currentTarget );
	},
	
	/**
	 * removes a locking layer above a node
	 * @param Node node - node to remove locking layer from
	 */
	positionUnLockLayer: function( node ){
		var sNode = dojo.query( 'div.'+this.lockLayerClass, node );
		if( sNode.length ) dojo.addClass( sNode[0], this.hideClass );
	},
	
	
	/**
	 * creates and shows an locking layer over given node
	 * @param Node node - node to lock
	 */
	positionLockLayer: function( node ){
		var coords = dojo.coords( node );
		var sNode = dojo.query( 'div.'+this.lockLayerClass, node );
		
		// create new layer node if not existing
		if( sNode.length==0){
			var newNode = document.createElement('DIV');
			var imgN = document.createElement('IMG');
			
			dojo.addClass( newNode, this.lockLayerClass+' '+this.hideClass );
			node.appendChild( newNode );
			sNode = newNode; 
		}
		
		// correct position
		dojo.style( sNode, 'height', coords.h+'px' );
		dojo.style( sNode, 'width', coords.w+'px' );
		dojo.style( sNode, 'top', coords.t+'px' );
		dojo.style( sNode, 'left', coords.l+'px' );
		
		dojo.removeClass( sNode, this.hideClass );
		
	},
	
	/**
	 * creates the images list and attached hover effects
	 */
	buildImageFromLocalList: function(){
		if( this.images.length>0 ) this.node.innerHTML = '';
		var highImg = (this.images.length>2)?1:0;
		this.index = highImg;
		for( var i=0; i<this.images.length; i++ ){
			var newNode = document.createElement('DIV');
			var newImage = document.createElement('IMG');
			var newLink = document.createElement('A');
			
			dojo.attr(newLink,'href', "/wcms/bilder/?gallery="+this.images[i].gid);
			dojo.attr(newImage,'src', this.images[i].fullpath);
			dojo.attr(newImage,'alt', this.images[i].title);			
			dojo.attr(newImage,'title', this.images[i].title);			
			dojo.addClass( newNode, this.imageBoxClass );
			if(i!=highImg) dojo.addClass( newNode, this.imageBoxCloseClass );
						
			dojo.connect( newNode, 'mouseover', this, this.mouseOverHandler );
			dojo.connect( newNode, 'mouseout', this, this.mouseOutHandler );
			this.imageBoxes.push( newNode );
			
			newNode.appendChild( newLink );
			newLink.appendChild( newImage );
			this.node.appendChild( newNode );
			
			// this.positionLockLayer( newNode );
		}
		this.startTimer();
	},
	
	/**
	 * error handler for ajax request
	 * @private
	 * @param obj Object 
	 * @param ioArgs dojo.__IoCallbackArgs
	 */
	_errorHandler: function( obj, ioArgs ){
		console.info( obj );
	},
	
	/**
	 * data handler for AJAX request
	 * @private
	 * @param Object obj - result object
	 * @param Object ioArgs - result arguments 
	 */
	_dataHandler: function( obj, ioArgs ){
		var scope = ioArgs.args.scope;
		
		if( obj.imageList ){
			scope.images = obj.imageList;  
		}
		
		scope.buildImageFromLocalList();
	},
	
	/**
	 * send AJAX request to get content result
	 * @private
	 */
	_sendRequest: function(action,advObj){
		if( this.actionURI=='' ) return false;
		
		var requestObj = {};
		var requestURL = this.actionURI;
		
		if( advObj ) dojo.mixin( requestObj, advObj );
		requestObj.action = action;
		requestObj.count = this.imageCount;
		// requestObj.data = dojo.toJson( requestObj.data );
		
		var requestObj = {'handleAs':'json',
						  'load':this._dataHandler,
						  'error':this._errorHandler,
						  'preventCache':true,
						  'scope':this,
						  'content': requestObj,
						  'url':requestURL };
		
		dojo.xhrPost( requestObj );
	}
	
});
/** END shaCAC.topMenu */