// 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 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.layer ) ;
			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' , 'ddmenu-layer' ) ;
				c1.set( structure.container , 'className' , 'ddmenu-container' ) ;
				c1.set( structure.layerPointer , 'className' , 'ddmenu-layerPointer' ) ;
				c1.set( structure.contentHolder , 'className' , '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 ) ;
			//maskElement( structure.layerMask );
		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 ) ){
						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 ) ) ;
					}
				}
			}
		}
		$.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 ){
		if( isFunc( $.onSelect ) ){ 
			$.onSelect( o ) ;
			$.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 : 100 ,
		onCreate : null , 
		onSelect : 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' ) ;
			this.setPosition() ;
			this.bringToFront() ;
			if( anchor.nodeName.toLowerCase() == 'img') swapImage( anchor , 'over' ) ;
		} ,
		hide : function( b ){
			var b = b || false ;
			if( b ) c2.remove( structure.layer ) ;
			if( !b) c1.set( structure.layer , 'display' , 'none' ) ;
			if( anchor.nodeName.toLowerCase() == 'img') swapImage( anchor , '' ) ;
		} ,
		scrollable : false ,
		isDropDown : true ,
		triggerEvent : 'mouseover' , 
		removeWhenCloning : true ,
		setDimension : function( w , h  ){
			var w = w || this.width , h = h || this.height ;
			c1.set( structure.layer , 'width' , w + 'px' ) ;
			c1.set( structure.layerMask , 'width' , w + 'px' ) ;
			c1.set( structure.container , 'width' , w + 'px' ) ;
			c1.set( structure.contentMask , 'width' , w + 'px' ) ;
			c1.set( structure.contentHolder , 'width' , ( w - ( 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>
	

*/