// simon.francoeur@gmail.com
function $dropDownClass( anchor , content ){
	
	var c1 = jml.obj ;
	var c2 = jml.xml.node ;
	var c3 = jml.events ;
	var c4 = jml.jme ;
	
	var jme1 = new jml.jme.motion() ;
	var anchor = anchor || null ;
	var content = content || null ;
	var mouse = { onSector : false , intl : null , delay : { validation : 200 , mouseCalculation : { limit : 4 , count : 0 } } } ;
	if( !isset( anchor ) || !isset( content ) ) return null ;
	var structure = {} ;
	function create(){
		if( !isset( structure.layer ) ){
			structure.layer = c2.create( 'div' , document.body ) ;
			c1.set( structure.layer , 'position' , 'absolute' ) ;
			c1.set( structure.layer , 'left' , '0px' ) ;
			c1.set( structure.layer , 'top' , '0px' ) ;
		}
		structure.layerMask = c2.create( 'div' , structure.layer ) ;
		structure.container = c2.create( 'div' , structure.layerMask ) ;
			structure.layerPointer = c2.create( 'div' , structure.container ) ;
			structure.contentMask = c2.create( 'div' , structure.container ) ;
				structure.contentHolder = c2.create( 'div' , structure.contentMask ) ;
				
				c1.set( structure.layer , 'className' , ( isset( $.cssClassPrefix ) ? $.cssClassPrefix : '' ) + 'ddmenu-layer' ) ;
				c1.set( structure.container , 'className' , ( isset( $.cssClassPrefix ) ? $.cssClassPrefix : '' ) + 'ddmenu-container' ) ;
				c1.set( structure.layerPointer , 'className' , ( isset( $.cssClassPrefix ) ? $.cssClassPrefix : '' ) + 'ddmenu-layerPointer' ) ;
				c1.set( structure.contentHolder , 'className' , ( isset( $.cssClassPrefix ) ? $.cssClassPrefix : '' ) + 'ddmenu-contentHolder' ) ;
				
				if( isStr( content ) ) content = getObj( content ) ;
				if( !isset( content ) ) return ; // error... no content found...
				c1.set( structure.contentHolder , 'innerHTML' , c1.get( content , 'innerHTML' ) ) ;
				if( $.removeWhenCloning ) c2.remove( content ) ;
			
			if( isset( $.animation ) ){
				$.setDimension() ;
				maskElement( structure.layerMask ) ;
				c1.set( structure.container , 'position' , 'absolute' ) ;
				c1.set( structure.container , 'top' , (-( $.height == 'auto' ? c1.get( structure.contentHolder , 'offsetHeight' ) : $.height )) + "px" ) ;
			}
			
		if( !isset( structure.ifrm ) && isset( lower( navigator.userAgent ).match( 'msie 6' ) ) ){
			try{
				structure.ifrm = c2.create( 'div' , document.body ) ;
					c1.set( structure.ifrm , 'position' , 'absolute' ) ;
					c1.set( structure.ifrm , 'overflow' , 'hidden' ) ;
					c1.set( structure.ifrm , 'left' , '0px' ) ;
					c1.set( structure.ifrm , 'top' , '0px' ) ;
				var iframe = c2.create( 'iframe' , structure.ifrm ) ;
					c1.set( iframe , 'display' , 'block' ) ;
					c1.set( iframe , 'position' , 'absolute' ) ;
					c1.set( iframe , 'margin' , '0px' ) ;
					c1.set( iframe , 'padding' , '0px' ) ;
					c1.set( iframe , 'border' , '0px' ) ;
					c1.set( iframe , 'zIndex' , '-1' ) ;
					c1.set( iframe , 'filter' , 'mask()' ) ;
					c1.set( iframe , 'width' , '3000px' ) ;
					c1.set( iframe , 'height' , '3000px' ) ;
					c1.set( iframe , 'left' , '0px' ) ;
					c1.set( iframe , 'top' , '0px' ) ;
			}catch( e ){}
		}	
		if( $.isDropDown ){
			var x1 = c2.byPosition( 0 , structure.contentHolder ) ;
			if( x1.nodeName.toLowerCase() == 'ul' ){
				var n1 = c2.length( x1 ) ;
				for( var i = 0 ; i < n1 ; i++ ){
					var x2 = c2.byPosition( i , x1 ) ;
					if( isset( x2 ) ){
						var x = c2.byPosition( 0 , x2 ) , v = null;
						if( isset( x ) && lower( x.nodeName ) == "a" ){
							v = x.href ;
							v = v.replace( /^(.+)?#value:/ , '' ) ;
							x.href = "javascript:void(0);" ;
						}
						c1.set( x2 , 'cursor' , 'pointer' ) ;
						c3.add( x2 , 'mouseover' , delegate( null , mouseOverItem , x2 ) ) ;
						c3.add( x2 , 'mouseout' , delegate( null , mouseOutItem , x2 ) ) ;
						c3.add( x2 , 'click' , delegate( null , selectItem , x2 , v ) ) ;
					}
				}
			}
		}
		$.setDimension() ;
		if( isFunc( $.onCreate ) ) $.onCreate( structure ) ;
	} ;
	function mouseOverItem( e , o ){ manageCssClass( o , "over" , true ) ; } ;
	function mouseOutItem( e , o ){ manageCssClass( o , "over" , false ) ; } ;
	function selectItem( e , o , value ){
		if( !isset( o ) ) return ;
		if( isFunc( $.onSelect ) ){ 
			$.onSelect( o , value ) ;
			$.hide() ;
		}else{
			var x = c2.byPosition( 0 , o ) ;
			if( x.nodeName.toLowerCase() == 'a' ){
				var u = c1.get( x , 'href' ) ;
				if( isset( u ) && !isEmpty( u ) ) window.location.href = u ;
			}
		}
	} ;
	function manageCssClass( o , c , b ){
		var s = 'className' , n = c1.get( o , s ) ;
		if( !isset( n ) ) n = '' ;
		var t = b && n.indexOf( c ) == -1 ? n + " " + c : !b && n.indexOf( c ) != -1 ? n.replace( new RegExp( "(\\b" + c + "\\b)+" , "gi" ) , "" ) : null ;
		if( isset( t ) ) c1.set( o , s , t ) ;
	} ;
	function maskElement( o ){
		if( o != structure.container ) c1.set( o , 'position' , 'relative' );
		c1.set( o , 'overflow' , 'hidden' ) ;
		try{
			c1.set( o , 'overflow' , '-moz-scrollbars-none' );
			c1.set( o , 'overflow-x' , 'hidden' );
			c1.set( o , 'overflow-y' , 'hidden' );
		}catch( e ){}
	} ;
	function delayedEvaluation( e ){
		if( !mouse.onSector ){
			clearInterval( mouse.intl ) ; 
			c3.remove( document , 'mousemove', evaluateSector );
			$.hide() ;
		}
	} ;
	function evaluateSector( e ){
		if( mouse.delay.mouseCalculation.count == mouse.delay.mouseCalculation.limit ){
			mouse.onSector = c3.hitTest( e , [ anchor , structure.layer ] ).on ; 
			mouse.delay.mouseCalculation.count = 0 ;
		}else{ mouse.delay.mouseCalculation.count ++ ; }
	} ;
	function swapImage( o , s ){
		var i = o.src ;
		var e = i.match( /\.\D{3,4}$/ ) ;
		var b = isset( i.match( '_over' ) ) ;
		if( !b && s == 'over' ) o.src = i.replace( e , '_over' + e ) ;
		if( b && s == '' ) o.src = i.replace( i.match( '_over' + e ) , '' + e ) ;
	}
	var $ = {
		width : 200 ,
		height : 'auto' ,
		onCreate : null , 
		onSelect : null ,
		animation : null ,
		initialize : function(){
			if( isStr( anchor ) ) anchor = getObj( anchor ) ;
			if( !isset( anchor ) ) return ; // error... no anchor found...				
			try{
				anchor.onmouseover = "" ;
				anchor.onmouseout = "" ;
			}catch( e ){}
			c1.set( anchor , 'cursor' , 'pointer' ) ;
			c3.add( anchor , $.triggerEvent , delegate( this , 'show' ) ) ;
			$dropDownClass.member.push( this ) ;
		} ,
		show : function(){
			$dropDownClass.closeAll( this ) ;
			mouse.onSector = true ;
			c3.remove( document , 'mousemove' , evaluateSector ) ;
			c3.add( document , 'mousemove' , evaluateSector ) ;
			clearInterval( mouse.intl ) ;
			mouse.intl = setInterval( delayedEvaluation , mouse.delay.validation ) ;
			!isset( structure.layer ) ? create() : c1.set( structure.layer , 'display' , 'block' ) ;
			if( isset( structure.ifrm ) ) c1.set( structure.ifrm , 'display' , 'block' ) ;
			this.setPosition() ;
			this.bringToFront() ;
			if( anchor.nodeName.toLowerCase() == 'img') swapImage( anchor , 'over' ) ;
			if( isset( $.animation ) ){
				if( $.animation == 'slide' ){
					jme1.onMotionFinished = function( target , property ){}
					jme1.start( { target : structure.container , property : 'top' , end : 0 , duration : 18 , equation : 'easeOut' , id : null } ) ;
				}
			}
		} ,
		hide : function( b ){
			var b = b || false ;
			if( b ) c2.remove( structure.layer ) ;
			if( !b){
				if( isset( $.animation ) ){
					if( $.animation == 'slide' ){
						jme1.onMotionFinished = function( target , property ){
							c1.set( structure.layer , 'display' , 'none' ) ;
							if( isset( structure.ifrm ) ) c1.set( structure.ifrm , 'display' , 'none' ) ;
						}
						jme1.start( { target : structure.container , property : 'top' , end : (-( $.height == 'auto' ? c1.get( structure.contentHolder , 'offsetHeight' ) : $.height )) , duration : 14 , equation : 'easeOut' , id : null } ) ;
					}
				}else{
					c1.set( structure.layer , 'display' , 'none' ) ;
					if( isset( structure.ifrm ) ) c1.set( structure.ifrm , 'display' , 'none' ) ;
				}
			}
			if( anchor.nodeName.toLowerCase() == 'img') swapImage( anchor , '' ) ;
		} ,
		cssClassPrefix : null ,
		scrollable : false ,
		isDropDown : false ,
		triggerEvent : 'mouseover' , 
		removeWhenCloning : true ,
		setDimension : function( w , h  ){
			var w = w || this.width , h = h || ( $.height == 'auto' ? c1.get( structure.contentHolder , 'offsetHeight' ) : this.height ) ;
			c1.set( structure.layer , 'width' , w + 'px' ) ;
			c1.set( structure.layerMask , 'width' , w + 'px' ) ;
			if( isset( $.animation ) ) c1.set( structure.layerMask , 'height' , h + 'px' ) ;
			c1.set( structure.container , 'width' , w + 'px' ) ;
			c1.set( structure.contentMask , 'width' , w + 'px' ) ;
			
			var bw = jml.obj.get( structure.contentHolder , "border-left-width" ) + jml.obj.get( structure.contentHolder , "border-right-width" ) ;
			if(isNaN(bw)) bw = 0 ;
			c1.set( structure.contentHolder , 'width' , ( w - bw - ( this.scrollable ? 17 : 0 ) ) + 'px' ) ;
			if( this.scrollable ) c1.set( structure.contentMask , 'height' , h + 'px' ) ;
			if( isset( structure.ifrm ) ){
				c1.set( structure.ifrm , 'width' , ( c1.get( structure.layer , 'offsetWidth' ) + 10 ) + 'px' );
				c1.set( structure.ifrm , 'height' , ( c1.get( structure.layer , 'offsetHeight' ) + 10 ) + 'px' );					
			}
		} , 
		setPosition : function(){
			if( isset( anchor ) ){
				var n1 = c1.get( anchor , 'offsetLeft' ) , n2 = c1.get( anchor , 'offsetTop' ) , n3 = c1.get( anchor , 'offsetWidth' ) , n4 = c1.get( anchor , 'offsetHeight' ) ;
				c1.set( structure.layer , 'left' , n1 + 'px' );
				c1.set( structure.layer , 'top' , ( n2 + n4 ) + 'px' );
				c1.set( structure.ifrm , 'left' , ( n1 - 5 ) + 'px' );
				c1.set( structure.ifrm , 'top' , ( ( n2 + n4 ) - 5 ) + 'px' );
			}
		} , 
		bringToFront : function(){ c1.set( structure.layer , 'zIndex' , '999999' ) ; } 
	} ;
	return $ ;
} ;
$dropDownClass.member = [] ;
$dropDownClass.closeAll = function( o ){
	for( var i = 0 ; i < $dropDownClass.member.lentgh ; i++ ) if( $dropDownClass.member[ i ] != o ) $dropDownClass.member[ i ].hide() ;
}

/*

	// Generated layer structure


	<div>							// structure.layer
		<div>						// structure.layerMask ( for animation purpose )
			<div>					// structure.container
				<div></div>			// structure.layerPointer
				<div>				// structure.contentMask ( for animation or scroll purpose )
					<div>			// structure.contentHolder
						
						
									// your content will be placed here.
						
						
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	// dropdown structure
	
	<div>
		<ul>	
			<li><a href="">Link</a></li>
		</ul>
	</div>
	

*/