/*
	All DOM manipulation must occur within this callback to ensure
	that it is ready.
*/
Ext.onReady(function() {

	function logMessage(msg) {
	}

	function HandleMouseOverTarget(e) {
		logMessage('handlemouseovertarget');
		this.eventEl.stopEvent = true;
	}
	
	function HandleMouseOutTarget(e) {
		logMessage('handlemouseouttarget');
		if (this.targetEl.isVisible()) {
			this.targetEl.hide(true);
		}
	}

	function HandleMouseOverEvent(e) {
		logMessage('handlemouseoverevent');
		this.eventEl.stopEvent = false;
		if (this) {
			if (!this.targetEl.isVisible()) {
				this.targetEl.show(true);
			}
		}
	}
	
	function HandleMouseOutEvent(e) {
		logMessage('handlemouseoutevent');
		if (!this.eventEl.stopEvent) {
			if (this.targetEl.isVisible()) {
				this.targetEl.hide(true);	
			}
		}
	}
	
	function attachEffects(eventElement, targetElement) {
		var eventEl = Ext.get(eventElement);
		var targetEl = Ext.get(targetElement);
		
		if (eventEl && targetEl) {
			// anchor target element to the element firing the event (the mouse over)
			targetEl.position('absolute');
			targetEl.anchorTo(eventEl, 'bl');
			
			// handle the mouseover and mouseout for the event element
			var eventScope = { 'eventEl': eventEl, 'targetEl': targetEl };
			
			eventEl.on('mouseover', HandleMouseOverEvent, eventScope, { });
			eventEl.on('mouseout', HandleMouseOutEvent, eventScope, { delay: 2000 });
			
			targetEl.hover(HandleMouseOverTarget, HandleMouseOutTarget, eventScope);
			
		}
	}
	
	
	// attach effects to the cart
	attachEffects('cart', 'cartdiv');
	
	// attache effects to the mrv
	attachEffects('mrv', 'mrvdiv');

    
});

function handleOverlayXClick(e) {
    e.stopEvent();
    if (this.targetEl) {
        this.targetEl.hide(true);
    }
}

function showOverlay(targetElement) {
    var targetEl = Ext.get(targetElement);
    if (targetEl) {
        if (!targetEl.isVisible()) {
            var closeElArr = targetEl.query('.overlayX');
            if (closeElArr) {
                for (i = 0; i < closeElArr.length; i++) {
                    var closeEl = Ext.get(closeElArr[i]);
                    if (closeEl) {
                        var eventScope = { 'eventEl': closeEl, 'targetEl': targetEl };
                        closeEl.on('click', handleOverlayXClick, eventScope);
                    }
                }
            }
            
		    targetEl.alignTo(Ext.getDoc(), 'c-c');
            targetEl.show(true);
        }
    }
}