//DDTarget Object
	IMF.namespace("imfPrd.DDTarget");
	IMF.imfPrd.DDTarget = {
		TARGET_ID:'dd-target',
		TARGET_OPEN_BTN:'target-open-button',
		TARGET_CLOSE_BTN:'target-close-button',
		TARGET_REFRESH_BTN:'target-refresh-button',
		TARGET_DIALOG:'dd-dialog-container',
		TIMEOUT:null,
		TARGETS:[IMF.imfPrd.basket,IMF.imfPrd.favorites,IMF.imfPrd.wishlist,IMF.imfPrd.compare],
		init:function(){
			var Event = IMF.util.Event;
			var Dom = IMF.util.Dom;
			var TARGETS = this.TARGETS;
			
			IMF.namespace("imfPrd.ddSlots");
			IMF.imfPrd.ddSlots = [];
			
			for( var i in TARGETS ){
				var t = TARGETS[i];
				if( typeof t == 'object' ){
					if( typeof t.TARGET_ID == 'string' ){
						IMF.imfPrd.ddSlots[i] = new IMF.util.DDTarget( t.TARGET_ID, "cart");
						if( typeof t.init == 'function' ){ t.init(); }
					}
				}
			}
			
			Dom.setStyle( this.TARGET_ID, "top", (DDM.getScrollTop()-300)+"px" );
			
			Dom.setStyle( this.TARGET_OPEN_BTN, "cursor", "pointer" );
			Event.on( this.TARGET_OPEN_BTN, 'click', function(){
				IMF.imfPrd.DDTarget.show();
			} );
			
			Dom.setStyle( this.TARGET_CLOSE_BTN, "cursor", "pointer" );
			Event.on( this.TARGET_CLOSE_BTN, 'click', function(){
				IMF.imfPrd.DDTarget.hide();
			} );
			
			Dom.setStyle( this.TARGET_REFRESH_BTN, "cursor", "pointer" );
			Event.on( this.TARGET_REFRESH_BTN, 'click', function(){
				for( var i in TARGETS ){
					var t = TARGETS[i];
					if( typeof t == 'object' ){
						if( typeof t.refresh == 'function' ){ t.refresh(); }
					}
				}
			} );
		},
		show:function( btnSlide ){
			var Dom = IMF.util.Dom;
			var targetEl = Dom.get( this.TARGET_ID );
			
			targetEl.className = "dd-target-active";
			Dom.setStyle( targetEl, "width", Dom.getViewportWidth()+"px" );
			
			if( DDM.getScrollTop() != parseInt( Dom.getStyle( targetEl, "top" ) ) ){
				Dom.setStyle( targetEl, "top", (DDM.getScrollTop()-300)+"px" );
			}
			
    		var slideAnim = new IMF.util.Anim( targetEl, { top:{ to:DDM.getScrollTop() } }, 0.3 );         
    		slideAnim.animate();
    		
    		var showAnim = new IMF.util.Anim( targetEl, { opacity:{ to:1 } }, 0.3 );
    		showAnim.animate();
		},
		hide:function(){
			var Dom = IMF.util.Dom;
			var targetEl = Dom.get( this.TARGET_ID );
			
			if( this.TIMEOUT ){
	        	clearTimeout( this.TIMEOUT );
	        	this.TIMEOUT = null;
	        }
			
			Dom.setStyle( targetEl, "width", Dom.getViewportWidth()+"px" );
			
			var slideAnim = new IMF.util.Anim( targetEl, { top:{ to:(DDM.getScrollTop()-300) } }, 0.3 );
    		slideAnim.animate();
			
			var hideAnim = new IMF.util.Anim( targetEl, { opacity:{ to:0 } }, 0.5 );
			hideAnim.onComplete.subscribe( function(){ targetEl.className = "dd-target-normal"; } );
			hideAnim.animate();
		},
		action:function( targetEl, el ){
			if( !targetEl || !el ){ return false; }
			if( typeof targetEl.getAttribute("id") != 'string' ){ return false; }
			
			for( var i in this.TARGETS ){
				var t = this.TARGETS[i];
				if( typeof t == 'object' ){
					if( typeof t.TARGET_ID == 'string' && typeof t.add == 'function' ){
						if( t.TARGET_ID == targetEl.getAttribute("id") ){ t.add( el ); }
					}
				}
			}
		},
		getProductID:function( el ){
			var Dom = IMF.util.Dom;
			var items = Dom.getElementsBy( function(e){ return ( e.getAttribute("name") != "product_id" ) ? false : true; }, 'input', el );
			if( !items && typeof items != 'Array' && items.length <= 0 ){ return; }
			return items[0].getAttribute("value");
		},
		alert:function( title, text, att ){
			var att = ( typeof att == 'object' ) ? att : {};
			
			var dialog = new IMF.widget.SimpleDialog( "imflexiPanel", { 
				width: "300px", fixedcenter: true, visible: true, draggable: false, close: true, modal:true, text: text,
				icon: IMF.widget.SimpleDialog.ICON_INFO, constraintoviewport: true,
				buttons: [ { text:ILANG.OK, handler: ( ( typeof att.ok == 'function' ) ? att.ok : function(){ this.hide(); } ), isDefault:true } ]
			} );
			
			dialog.setHeader( '<div class="left"><div class="right"><div class="top"><span>' + title + '</span></div></div></div>' );
			dialog.cfg.queueProperty("keylisteners", new IMF.util.KeyListener( document, { keys:27 }, { fn:dialog.hide, scope:dialog, correctScope:true }, "keyup" ) );
			dialog.render( document.body );
			
			var oFooter = dialog.footer;
            oFooter.innerHTML = '<div class="left"><div class="right"><div class="bottom"><span>'+oFooter.innerHTML+'</span></div></div></div>';
            dialog.changeFooterEvent.fire(oFooter.innerHTML);
            
			var oBody = dialog.body;
            oBody.innerHTML = '<div class="right">'+oBody.innerHTML+'</div>';
            dialog.changeBodyEvent.fire(oBody.innerHTML);
            dialog.changeContentEvent.fire();
		},
		dialog:function( title, content, att ){
			var att = ( typeof att == 'object' ) ? att : {};
			
			var dialogPanel = new IMF.widget.Dialog( "ImflexiDialogPanelForm",{ 
				width:"50em", fixedcenter:true, visible:true, modal:true, constraintoviewport:true,
				buttons:[ { text:ILANG.SUBMIT, handler: ( ( typeof att.ok == 'function' ) ? att.ok : function(){ this.submit(); } ) },
					      { text:ILANG.CANCEL, handler: ( ( typeof att.cancel == 'function' ) ? att.cancel : function(){ this.cancel(); } ) } ]
			});
					
			dialogPanel.setHeader( '<div class="left"><div class="right"><div class="top"><span>' + title + '</span></div></div></div>' );
			dialogPanel.setBody( '<div class="bd"><div class="right"><div class="dialog-form-options">'+content+'</div></div></div>' );
			
			//Validate
			if( typeof att.validate == 'function' ){ dialogPanel.validate = att.validate; }else{ dialogPanel.validate = function(){ return true; } }
			
			//Callback
			if( typeof att.callback == 'object' ){ dialogPanel.callback = att.callback; }else{ dialogPanel.callback = { success:function(o){}, failure:function(o){} } }
			
			// Cancel ESC key
			dialogPanel.cfg.queueProperty("keylisteners", new IMF.util.KeyListener( document, { keys:27 }, { fn:dialogPanel.hide, scope:dialogPanel, correctScope:true }, "keyup" ) );
			
			//Render Dialog
			dialogPanel.render( document.body );
			
			//Change footer for skin
			var oFooter = dialogPanel.footer;
            oFooter.innerHTML = '<div class="left"><div class="right"><div class="bottom"><span>'+oFooter.innerHTML+'</span></div></div></div>';
            dialogPanel.changeFooterEvent.fire(oFooter.innerHTML);
            dialogPanel.changeContentEvent.fire();
		}
	};