/* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.2 */ /** * The drag and drop utility provides a framework for building drag and drop * applications. In addition to enabling drag and drop for specific elements, * the drag and drop elements are tracked by the manager class, and the * interactions between the various elements are tracked during the drag and * the implementing code is notified about these important moments. * @module dragdrop * @title Drag and Drop * @requires yahoo,dom,event * @namespace YAHOO.util */ // Only load the library once. Rewriting the manager class would orphan // existing drag and drop instances. if (!YAHOO.util.DragDropMgr) { /** * DragDropMgr is a singleton that tracks the element interaction for * all DragDrop items in the window. Generally, you will not call * this class directly, but it does have helper methods that could * be useful in your DragDrop implementations. * @class DragDropMgr * @static */ YAHOO.util.DragDropMgr = function() { var Event = YAHOO.util.Event; return { /** * Two dimensional Array of registered DragDrop objects. The first * dimension is the DragDrop item group, the second the DragDrop * object. * @property ids * @type {string: string} * @private * @static */ ids: {}, /** * Array of element ids defined as drag handles. Used to determine * if the element that generated the mousedown event is actually the * handle and not the html element itself. * @property handleIds * @type {string: string} * @private * @static */ handleIds: {}, /** * the DragDrop object that is currently being dragged * @property dragCurrent * @type DragDrop * @private * @static **/ dragCurrent: null, /** * the DragDrop object(s) that are being hovered over * @property dragOvers * @type Array * @private * @static */ dragOvers: {}, /** * the X distance between the cursor and the object being dragged * @property deltaX * @type int * @private * @static */ deltaX: 0, /** * the Y distance between the cursor and the object being dragged * @property deltaY * @type int * @private * @static */ deltaY: 0, /** * Flag to determine if we should prevent the default behavior of the * events we define. By default this is true, but this can be set to * false if you need the default behavior (not recommended) * @property preventDefault * @type boolean * @static */ preventDefault: true, /** * Flag to determine if we should stop the propagation of the events * we generate. This is true by default but you may want to set it to * false if the html element contains other features that require the * mouse click. * @property stopPropagation * @type boolean * @static */ stopPropagation: true, /** * Internal flag that is set to true when drag and drop has been * intialized * @property initialized * @private * @static */ initalized: false, /** * All drag and drop can be disabled. * @property locked * @private * @static */ locked: false, /** * Provides additional information about the the current set of * interactions. Can be accessed from the event handlers. It * contains the following properties: * * out: onDragOut interactions * enter: onDragEnter interactions * over: onDragOver interactions * drop: onDragDrop interactions * point: The location of the cursor * draggedRegion: The location of dragged element at the time * of the interaction * sourceRegion: The location of the source elemtn at the time * of the interaction * validDrop: boolean * @property interactionInfo * @type object * @static */ interactionInfo: null, /** * Called the first time an element is registered. * @method init * @private * @static */ init: function() { this.initialized = true; }, /** * In point mode, drag and drop interaction is defined by the * location of the cursor during the drag/drop * @property POINT * @type int * @static * @final */ POINT: 0, /** * In intersect mode, drag and drop interaction is defined by the * cursor position or the amount of overlap of two or more drag and * drop objects. * @property INTERSECT * @type int * @static * @final */ INTERSECT: 1, /** * In intersect mode, drag and drop interaction is defined only by the * overlap of two or more drag and drop objects. * @property STRICT_INTERSECT * @type int * @static * @final */ STRICT_INTERSECT: 2, /** * The current drag and drop mode. Default: POINT * @property mode * @type int * @static */ mode: 0, /** * Runs method on all drag and drop objects * @method _execOnAll * @private * @static */ _execOnAll: function(sMethod, args) { for (var i in this.ids) { for (var j in this.ids[i]) { var oDD = this.ids[i][j]; if (! this.isTypeOfDD(oDD)) { continue; } oDD[sMethod].apply(oDD, args); } } }, /** * Drag and drop initialization. Sets up the global event handlers * @method _onLoad * @private * @static */ _onLoad: function() { this.init(); Event.on(document, "mouseup", this.handleMouseUp, this, true); Event.on(document, "mousemove", this.handleMouseMove, this, true); Event.on(window, "unload", this._onUnload, this, true); Event.on(window, "resize", this._onResize, this, true); // Event.on(window, "mouseout", this._test); }, /** * Reset constraints on all drag and drop objs * @method _onResize * @private * @static */ _onResize: function(e) { this._execOnAll("resetConstraints", []); }, /** * Lock all drag and drop functionality * @method lock * @static */ lock: function() { this.locked = true; }, /** * Unlock all drag and drop functionality * @method unlock * @static */ unlock: function() { this.locked = false; }, /** * Is drag and drop locked? * @method isLocked * @return {boolean} True if drag and drop is locked, false otherwise. * @static */ isLocked: function() { return this.locked; }, /** * Location cache that is set for all drag drop objects when a drag is * initiated, cleared when the drag is finished. * @property locationCache * @private * @static */ locationCache: {}, /** * Set useCache to false if you want to force object the lookup of each * drag and drop linked element constantly during a drag. * @property useCache * @type boolean * @static */ useCache: true, /** * The number of pixels that the mouse needs to move after the * mousedown before the drag is initiated. Default=3; * @property clickPixelThresh * @type int * @static */ clickPixelThresh: 3, /** * The number of milliseconds after the mousedown event to initiate the * drag if we don't get a mouseup event. Default=1000 * @property clickTimeThresh * @type int * @static */ clickTimeThresh: 1000, /** * Flag that indicates that either the drag pixel threshold or the * mousdown time threshold has been met * @property dragThreshMet * @type boolean * @private * @static */ dragThreshMet: false, /** * Timeout used for the click time threshold * @property clickTimeout * @type Object * @private * @static */ clickTimeout: null, /** * The X position of the mousedown event stored for later use when a * drag threshold is met. * @property startX * @type int * @private * @static */ startX: 0, /** * The Y position of the mousedown event stored for later use when a * drag threshold is met. * @property startY * @type int * @private * @static */ startY: 0, /** * Each DragDrop instance must be registered with the DragDropMgr. * This is executed in DragDrop.init() * @method regDragDrop * @param {DragDrop} oDD the DragDrop object to register * @param {String} sGroup the name of the group this element belongs to * @static */ regDragDrop: function(oDD, sGroup) { if (!this.initialized) { this.init(); } if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } this.ids[sGroup][oDD.id] = oDD; }, /** * Removes the supplied dd instance from the supplied group. Executed * by DragDrop.removeFromGroup, so don't call this function directly. * @method removeDDFromGroup * @private * @static */ removeDDFromGroup: function(oDD, sGroup) { if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } var obj = this.ids[sGroup]; if (obj && obj[oDD.id]) { delete obj[oDD.id]; } }, /** * Unregisters a drag and drop item. This is executed in * DragDrop.unreg, use that method instead of calling this directly. * @method _remove * @private * @static */ _remove: function(oDD) { for (var g in oDD.groups) { if (g && this.ids[g][oDD.id]) { delete this.ids[g][oDD.id]; } } delete this.handleIds[oDD.id]; }, /** * Each DragDrop handle element must be registered. This is done * automatically when executing DragDrop.setHandleElId() * @method regHandle * @param {String} sDDId the DragDrop id this element is a handle for * @param {String} sHandleId the id of the element that is the drag * handle * @static */ regHandle: function(sDDId, sHandleId) { if (!this.handleIds[sDDId]) { this.handleIds[sDDId] = {}; } this.handleIds[sDDId][sHandleId] = sHandleId; }, /** * Utility function to determine if a given element has been * registered as a drag drop item. * @method isDragDrop * @param {String} id the element id to check * @return {boolean} true if this element is a DragDrop item, * false otherwise * @static */ isDragDrop: function(id) { return ( this.getDDById(id) ) ? true : false; }, /** * Returns the drag and drop instances that are in all groups the * passed in instance belongs to. * @method getRelated * @param {DragDrop} p_oDD the obj to get related data for * @param {boolean} bTargetsOnly if true, only return targetable objs * @return {DragDrop[]} the related instances * @static */ getRelated: function(p_oDD, bTargetsOnly) { var oDDs = []; for (var i in p_oDD.groups) { for (j in this.ids[i]) { var dd = this.ids[i][j]; if (! this.isTypeOfDD(dd)) { continue; } if (!bTargetsOnly || dd.isTarget) { oDDs[oDDs.length] = dd; } } } return oDDs; }, /** * Returns true if the specified dd target is a legal target for * the specifice drag obj * @method isLegalTarget * @param {DragDrop} the drag obj * @param {DragDrop} the target * @return {boolean} true if the target is a legal target for the * dd obj * @static */ isLegalTarget: function (oDD, oTargetDD) { var targets = this.getRelated(oDD, true); for (var i=0, len=targets.length;i this.clickPixelThresh || diffY > this.clickPixelThresh) { this.startDrag(this.startX, this.startY); } } if (this.dragThreshMet) { this.dragCurrent.b4Drag(e); this.dragCurrent.onDrag(e); this.fireEvents(e, false); } this.stopEvent(e); return true; }, /** * Iterates over all of the DragDrop elements to find ones we are * hovering over or dropping on * @method fireEvents * @param {Event} e the event * @param {boolean} isDrop is this a drop op or a mouseover op? * @private * @static */ fireEvents: function(e, isDrop) { var dc = this.dragCurrent; // If the user did the mouse up outside of the window, we could // get here even though we have ended the drag. if (!dc || dc.isLocked()) { return; } var x = YAHOO.util.Event.getPageX(e); var y = YAHOO.util.Event.getPageY(e); var pt = new YAHOO.util.Point(x,y); var pos = dc.getTargetCoord(pt.x, pt.y); var el = dc.getDragEl(); curRegion = new YAHOO.util.Region( pos.y, pos.x + el.offsetWidth, pos.y + el.offsetHeight, pos.x ); // cache the previous dragOver array var oldOvers = []; var outEvts = []; var overEvts = []; var dropEvts = []; var enterEvts = []; // Check to see if the object(s) we were hovering over is no longer // being hovered over so we can fire the onDragOut event for (var i in this.dragOvers) { var ddo = this.dragOvers[i]; if (! this.isTypeOfDD(ddo)) { continue; } if (! this.isOverTarget(pt, ddo, this.mode, curRegion)) { outEvts.push( ddo ); } oldOvers[i] = true; delete this.dragOvers[i]; } for (var sGroup in dc.groups) { if ("string" != typeof sGroup) { continue; } for (i in this.ids[sGroup]) { var oDD = this.ids[sGroup][i]; if (! this.isTypeOfDD(oDD)) { continue; } if (oDD.isTarget && !oDD.isLocked() && oDD != dc) { if (this.isOverTarget(pt, oDD, this.mode, curRegion)) { // look for drop interactions if (isDrop) { dropEvts.push( oDD ); // look for drag enter and drag over interactions } else { // initial drag over: dragEnter fires if (!oldOvers[oDD.id]) { enterEvts.push( oDD ); // subsequent drag overs: dragOver fires } else { overEvts.push( oDD ); } this.dragOvers[oDD.id] = oDD; } } } } } this.interactionInfo = { out: outEvts, enter: enterEvts, over: overEvts, drop: dropEvts, point: pt, draggedRegion: curRegion, sourceRegion: this.locationCache[dc.id], validDrop: isDrop }; // notify about a drop that did not find a target if (isDrop && !dropEvts.length) { this.interactionInfo.validDrop = false; dc.onInvalidDrop(e); } if (this.mode) { if (outEvts.length) { dc.b4DragOut(e, outEvts); dc.onDragOut(e, outEvts); } if (enterEvts.length) { dc.onDragEnter(e, enterEvts); } if (overEvts.length) { dc.b4DragOver(e, overEvts); dc.onDragOver(e, overEvts); } if (dropEvts.length) { dc.b4DragDrop(e, dropEvts); dc.onDragDrop(e, dropEvts); } } else { // fire dragout events var len = 0; for (i=0, len=outEvts.length; i * YAHOO.util.DragDropMgr.refreshCache(ddinstance.groups); * * Alternatively: * * YAHOO.util.DragDropMgr.refreshCache({group1:true, group2:true}); * * @TODO this really should be an indexed array. Alternatively this * method could accept both. * @method refreshCache * @param {Object} groups an associative array of groups to refresh * @static */ refreshCache: function(groups) { // refresh everything if group array is not provided var g = groups || this.ids; for (var sGroup in g) { if ("string" != typeof sGroup) { continue; } for (var i in this.ids[sGroup]) { var oDD = this.ids[sGroup][i]; if (this.isTypeOfDD(oDD)) { var loc = this.getLocation(oDD); if (loc) { this.locationCache[oDD.id] = loc; } else { delete this.locationCache[oDD.id]; } } } } }, /** * This checks to make sure an element exists and is in the DOM. The * main purpose is to handle cases where innerHTML is used to remove * drag and drop objects from the DOM. IE provides an 'unspecified * error' when trying to access the offsetParent of such an element * @method verifyEl * @param {HTMLElement} el the element to check * @return {boolean} true if the element looks usable * @static */ verifyEl: function(el) { try { if (el) { var parent = el.offsetParent; if (parent) { return true; } } } catch(e) { } return false; }, /** * Returns a Region object containing the drag and drop element's position * and size, including the padding configured for it * @method getLocation * @param {DragDrop} oDD the drag and drop object to get the * location for * @return {YAHOO.util.Region} a Region object representing the total area * the element occupies, including any padding * the instance is configured for. * @static */ getLocation: function(oDD) { if (! this.isTypeOfDD(oDD)) { return null; } var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l; try { pos= YAHOO.util.Dom.getXY(el); } catch (e) { } if (!pos) { return null; } x1 = pos[0]; x2 = x1 + el.offsetWidth; y1 = pos[1]; y2 = y1 + el.offsetHeight; t = y1 - oDD.padding[0]; r = x2 + oDD.padding[1]; b = y2 + oDD.padding[2]; l = x1 - oDD.padding[3]; return new YAHOO.util.Region( t, r, b, l ); }, /** * Checks the cursor location to see if it over the target * @method isOverTarget * @param {YAHOO.util.Point} pt The point to evaluate * @param {DragDrop} oTarget the DragDrop object we are inspecting * @param {boolean} intersect true if we are in intersect mode * @param {YAHOO.util.Region} pre-cached location of the dragged element * @return {boolean} true if the mouse is over the target * @private * @static */ isOverTarget: function(pt, oTarget, intersect, curRegion) { // use cache if available var loc = this.locationCache[oTarget.id]; if (!loc || !this.useCache) { loc = this.getLocation(oTarget); this.locationCache[oTarget.id] = loc; } if (!loc) { return false; } oTarget.cursorIsOver = loc.contains( pt ); // DragDrop is using this as a sanity check for the initial mousedown // in this case we are done. In POINT mode, if the drag obj has no // contraints, we are done. Otherwise we need to evaluate the // region the target as occupies to determine if the dragged element // overlaps with it. var dc = this.dragCurrent; if (!dc || (!intersect && !dc.constrainX && !dc.constrainY)) { //if (oTarget.cursorIsOver) { //} return oTarget.cursorIsOver; } oTarget.overlap = null; // Get the current location of the drag element, this is the // location of the mouse event less the delta that represents // where the original mousedown happened on the element. We // need to consider constraints and ticks as well. if (!curRegion) { var pos = dc.getTargetCoord(pt.x, pt.y); var el = dc.getDragEl(); curRegion = new YAHOO.util.Region( pos.y, pos.x + el.offsetWidth, pos.y + el.offsetHeight, pos.x ); } var overlap = curRegion.intersect(loc); if (overlap) { oTarget.overlap = overlap; return (intersect) ? true : oTarget.cursorIsOver; } else { return false; } }, /** * unload event handler * @method _onUnload * @private * @static */ _onUnload: function(e, me) { this.unregAll(); }, /** * Cleans up the drag and drop events and objects. * @method unregAll * @private * @static */ unregAll: function() { if (this.dragCurrent) { this.stopDrag(); this.dragCurrent = null; } this._execOnAll("unreg", []); for (i in this.elementCache) { delete this.elementCache[i]; } this.elementCache = {}; this.ids = {}; }, /** * A cache of DOM elements * @property elementCache * @private * @static */ elementCache: {}, /** * Get the wrapper for the DOM element specified * @method getElWrapper * @param {String} id the id of the element to get * @return {YAHOO.util.DDM.ElementWrapper} the wrapped element * @private * @deprecated This wrapper isn't that useful * @static */ getElWrapper: function(id) { var oWrapper = this.elementCache[id]; if (!oWrapper || !oWrapper.el) { oWrapper = this.elementCache[id] = new this.ElementWrapper(YAHOO.util.Dom.get(id)); } return oWrapper; }, /** * Returns the actual DOM element * @method getElement * @param {String} id the id of the elment to get * @return {Object} The element * @deprecated use YAHOO.util.Dom.get instead * @static */ getElement: function(id) { return YAHOO.util.Dom.get(id); }, /** * Returns the style property for the DOM element (i.e., * document.getElById(id).style) * @method getCss * @param {String} id the id of the elment to get * @return {Object} The style property of the element * @deprecated use YAHOO.util.Dom instead * @static */ getCss: function(id) { var el = YAHOO.util.Dom.get(id); return (el) ? el.style : null; }, /** * Inner class for cached elements * @class DragDropMgr.ElementWrapper * @for DragDropMgr * @private * @deprecated */ ElementWrapper: function(el) { /** * The element * @property el */ this.el = el || null; /** * The element id * @property id */ this.id = this.el && el.id; /** * A reference to the style property * @property css */ this.css = this.el && el.style; }, /** * Returns the X position of an html element * @method getPosX * @param el the element for which to get the position * @return {int} the X coordinate * @for DragDropMgr * @deprecated use YAHOO.util.Dom.getX instead * @static */ getPosX: function(el) { return YAHOO.util.Dom.getX(el); }, /** * Returns the Y position of an html element * @method getPosY * @param el the element for which to get the position * @return {int} the Y coordinate * @deprecated use YAHOO.util.Dom.getY instead * @static */ getPosY: function(el) { return YAHOO.util.Dom.getY(el); }, /** * Swap two nodes. In IE, we use the native method, for others we * emulate the IE behavior * @method swapNode * @param n1 the first node to swap * @param n2 the other node to swap * @static */ swapNode: function(n1, n2) { if (n1.swapNode) { n1.swapNode(n2); } else { var p = n2.parentNode; var s = n2.nextSibling; if (s == n1) { p.insertBefore(n1, n2); } else if (n2 == n1.nextSibling) { p.insertBefore(n2, n1); } else { n1.parentNode.replaceChild(n2, n1); p.insertBefore(n1, s); } } }, /** * Returns the current scroll position * @method getScroll * @private * @static */ getScroll: function () { var t, l, dde=document.documentElement, db=document.body; if (dde && (dde.scrollTop || dde.scrollLeft)) { t = dde.scrollTop; l = dde.scrollLeft; } else if (db) { t = db.scrollTop; l = db.scrollLeft; } else { } return { top: t, left: l }; }, /** * Returns the specified element style property * @method getStyle * @param {HTMLElement} el the element * @param {string} styleProp the style property * @return {string} The value of the style property * @deprecated use YAHOO.util.Dom.getStyle * @static */ getStyle: function(el, styleProp) { return YAHOO.util.Dom.getStyle(el, styleProp); }, /** * Gets the scrollTop * @method getScrollTop * @return {int} the document's scrollTop * @static */ getScrollTop: function () { return this.getScroll().top; }, /** * Gets the scrollLeft * @method getScrollLeft * @return {int} the document's scrollTop * @static */ getScrollLeft: function () { return this.getScroll().left; }, /** * Sets the x/y position of an element to the location of the * target element. * @method moveToEl * @param {HTMLElement} moveEl The element to move * @param {HTMLElement} targetEl The position reference element * @static */ moveToEl: function (moveEl, targetEl) { var aCoord = YAHOO.util.Dom.getXY(targetEl); YAHOO.util.Dom.setXY(moveEl, aCoord); }, /** * Gets the client height * @method getClientHeight * @return {int} client height in px * @deprecated use YAHOO.util.Dom.getViewportHeight instead * @static */ getClientHeight: function() { return YAHOO.util.Dom.getViewportHeight(); }, /** * Gets the client width * @method getClientWidth * @return {int} client width in px * @deprecated use YAHOO.util.Dom.getViewportWidth instead * @static */ getClientWidth: function() { return YAHOO.util.Dom.getViewportWidth(); }, /** * Numeric array sort function * @method numericSort * @static */ numericSort: function(a, b) { return (a - b); }, /** * Internal counter * @property _timeoutCount * @private * @static */ _timeoutCount: 0, /** * Trying to make the load order less important. Without this we get * an error if this file is loaded before the Event Utility. * @method _addListeners * @private * @static */ _addListeners: function() { var DDM = YAHOO.util.DDM; if ( YAHOO.util.Event && document ) { DDM._onLoad(); } else { if (DDM._timeoutCount > 2000) { } else { setTimeout(DDM._addListeners, 10); if (document && document.body) { DDM._timeoutCount += 1; } } } }, /** * Recursively searches the immediate parent and all child nodes for * the handle element in order to determine wheter or not it was * clicked. * @method handleWasClicked * @param node the html element to inspect * @static */ handleWasClicked: function(node, id) { if (this.isHandle(id, node.id)) { return true; } else { // check to see if this is a text node child of the one we want var p = node.parentNode; while (p) { if (this.isHandle(id, p.id)) { return true; } else { p = p.parentNode; } } } return false; } }; }(); // shorter alias, save a few bytes YAHOO.util.DDM = YAHOO.util.DragDropMgr; YAHOO.util.DDM._addListeners(); } (function() { var Event=YAHOO.util.Event; var Dom=YAHOO.util.Dom; /** * Defines the interface and base operation of items that that can be * dragged or can be drop targets. It was designed to be extended, overriding * the event handlers for startDrag, onDrag, onDragOver, onDragOut. * Up to three html elements can be associated with a DragDrop instance: * * This class should not be instantiated until the onload event to ensure that * the associated elements are available. * The following would define a DragDrop obj that would interact with any * other DragDrop obj in the "group1" group: * 
 *  dd = new YAHOO.util.DragDrop("div1", "group1");
 *
* Since none of the event handlers have been implemented, nothing would * actually happen if you were to run the code above. Normally you would * override this class or one of the default implementations, but you can * also override the methods you want on an instance of the class... * 
 *  dd.onDragDrop = function(e, id) {
 *    alert("dd was dropped on " + id);
 *  }
 *
* @namespace YAHOO.util * @class DragDrop * @constructor * @param {String} id of the element that is linked to this instance * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DragDrop: * padding, isTarget, maintainOffset, primaryButtonOnly, */ YAHOO.util.DragDrop = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); } }; YAHOO.util.DragDrop.prototype = { /** * The id of the element associated with this object. This is what we * refer to as the "linked element" because the size and position of * this element is used to determine when the drag and drop objects have * interacted. * @property id * @type String */ id: null, /** * Configuration attributes passed into the constructor * @property config * @type object */ config: null, /** * The id of the element that will be dragged. By default this is same * as the linked element , but could be changed to another element. Ex: * YAHOO.util.DDProxy * @property dragElId * @type String * @private */ dragElId: null, /** * the id of the element that initiates the drag operation. By default * this is the linked element, but could be changed to be a child of this * element. This lets us do things like only starting the drag when the * header element within the linked html element is clicked. * @property handleElId * @type String * @private */ handleElId: null, /** * An associative array of HTML tags that will be ignored if clicked. * @property invalidHandleTypes * @type {string: string} */ invalidHandleTypes: null, /** * An associative array of ids for elements that will be ignored if clicked * @property invalidHandleIds * @type {string: string} */ invalidHandleIds: null, /** * An indexted array of css class names for elements that will be ignored * if clicked. * @property invalidHandleClasses * @type string[] */ invalidHandleClasses: null, /** * The linked element's absolute X position at the time the drag was * started * @property startPageX * @type int * @private */ startPageX: 0, /** * The linked element's absolute X position at the time the drag was * started * @property startPageY * @type int * @private */ startPageY: 0, /** * The group defines a logical collection of DragDrop objects that are * related. Instances only get events when interacting with other * DragDrop object in the same group. This lets us define multiple * groups using a single DragDrop subclass if we want. * @property groups * @type {string: string} */ groups: null, /** * Individual drag/drop instances can be locked. This will prevent * onmousedown start drag. * @property locked * @type boolean * @private */ locked: false, /** * Lock this instance * @method lock */ lock: function() { this.locked = true; }, /** * Unlock this instace * @method unlock */ unlock: function() { this.locked = false; }, /** * By default, all insances can be a drop target. This can be disabled by * setting isTarget to false. * @method isTarget * @type boolean */ isTarget: true, /** * The padding configured for this drag and drop object for calculating * the drop zone intersection with this object. * @method padding * @type int[] */ padding: null, /** * Cached reference to the linked element * @property _domRef * @private */ _domRef: null, /** * Internal typeof flag * @property __ygDragDrop * @private */ __ygDragDrop: true, /** * Set to true when horizontal contraints are applied * @property constrainX * @type boolean * @private */ constrainX: false, /** * Set to true when vertical contraints are applied * @property constrainY * @type boolean * @private */ constrainY: false, /** * The left constraint * @property minX * @type int * @private */ minX: 0, /** * The right constraint * @property maxX * @type int * @private */ maxX: 0, /** * The up constraint * @property minY * @type int * @type int * @private */ minY: 0, /** * The down constraint * @property maxY * @type int * @private */ maxY: 0, /** * The difference between the click position and the source element's location * @property deltaX * @type int * @private */ deltaX: 0, /** * The difference between the click position and the source element's location * @property deltaY * @type int * @private */ deltaY: 0, /** * Maintain offsets when we resetconstraints. Set to true when you want * the position of the element relative to its parent to stay the same * when the page changes * * @property maintainOffset * @type boolean */ maintainOffset: false, /** * Array of pixel locations the element will snap to if we specified a * horizontal graduation/interval. This array is generated automatically * when you define a tick interval. * @property xTicks * @type int[] */ xTicks: null, /** * Array of pixel locations the element will snap to if we specified a * vertical graduation/interval. This array is generated automatically * when you define a tick interval. * @property yTicks * @type int[] */ yTicks: null, /** * By default the drag and drop instance will only respond to the primary * button click (left button for a right-handed mouse). Set to true to * allow drag and drop to start with any mouse click that is propogated * by the browser * @property primaryButtonOnly * @type boolean */ primaryButtonOnly: true, /** * The availabe property is false until the linked dom element is accessible. * @property available * @type boolean */ available: false, /** * By default, drags can only be initiated if the mousedown occurs in the * region the linked element is. This is done in part to work around a * bug in some browsers that mis-report the mousedown if the previous * mouseup happened outside of the window. This property is set to true * if outer handles are defined. * * @property hasOuterHandles * @type boolean * @default false */ hasOuterHandles: false, /** * Code that executes immediately before the startDrag event * @method b4StartDrag * @private */ b4StartDrag: function(x, y) { }, /** * Abstract method called after a drag/drop object is clicked * and the drag or mousedown time thresholds have beeen met. * @method startDrag * @param {int} X click location * @param {int} Y click location */ startDrag: function(x, y) { /* override this */ }, /** * Code that executes immediately before the onDrag event * @method b4Drag * @private */ b4Drag: function(e) { }, /** * Abstract method called during the onMouseMove event while dragging an * object. * @method onDrag * @param {Event} e the mousemove event */ onDrag: function(e) { /* override this */ }, /** * Abstract method called when this element fist begins hovering over * another DragDrop obj * @method onDragEnter * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of one or more * dragdrop items being hovered over. */ onDragEnter: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOver event * @method b4DragOver * @private */ b4DragOver: function(e) { }, /** * Abstract method called when this element is hovering over another * DragDrop obj * @method onDragOver * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of dd items * being hovered over. */ onDragOver: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOut event * @method b4DragOut * @private */ b4DragOut: function(e) { }, /** * Abstract method called when we are no longer hovering over an element * @method onDragOut * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this was hovering over. In INTERSECT mode, an array of dd items * that the mouse is no longer over. */ onDragOut: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragDrop event * @method b4DragDrop * @private */ b4DragDrop: function(e) { }, /** * Abstract method called when this item is dropped on another DragDrop * obj * @method onDragDrop * @param {Event} e the mouseup event * @param {String|DragDrop[]} id In POINT mode, the element * id this was dropped on. In INTERSECT mode, an array of dd items this * was dropped on. */ onDragDrop: function(e, id) { /* override this */ }, /** * Abstract method called when this item is dropped on an area with no * drop target * @method onInvalidDrop * @param {Event} e the mouseup event */ onInvalidDrop: function(e) { /* override this */ }, /** * Code that executes immediately before the endDrag event * @method b4EndDrag * @private */ b4EndDrag: function(e) { }, /** * Fired when we are done dragging the object * @method endDrag * @param {Event} e the mouseup event */ endDrag: function(e) { /* override this */ }, /** * Code executed immediately before the onMouseDown event * @method b4MouseDown * @param {Event} e the mousedown event * @private */ b4MouseDown: function(e) { }, /** * Event handler that fires when a drag/drop obj gets a mousedown * @method onMouseDown * @param {Event} e the mousedown event */ onMouseDown: function(e) { /* override this */ }, /** * Event handler that fires when a drag/drop obj gets a mouseup * @method onMouseUp * @param {Event} e the mouseup event */ onMouseUp: function(e) { /* override this */ }, /** * Override the onAvailable method to do what is needed after the initial * position was determined. * @method onAvailable */ onAvailable: function () { }, /** * Returns a reference to the linked element * @method getEl * @return {HTMLElement} the html element */ getEl: function() { if (!this._domRef) { this._domRef = Dom.get(this.id); } return this._domRef; }, /** * Returns a reference to the actual element to drag. By default this is * the same as the html element, but it can be assigned to another * element. An example of this can be found in YAHOO.util.DDProxy * @method getDragEl * @return {HTMLElement} the html element */ getDragEl: function() { return Dom.get(this.dragElId); }, /** * Sets up the DragDrop object. Must be called in the constructor of any * YAHOO.util.DragDrop subclass * @method init * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ init: function(id, sGroup, config) { this.initTarget(id, sGroup, config); Event.on(this.id, "mousedown", this.handleMouseDown, this, true); // Event.on(this.id, "selectstart", Event.preventDefault); }, /** * Initializes Targeting functionality only... the object does not * get a mousedown handler. * @method initTarget * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ initTarget: function(id, sGroup, config) { // configuration attributes this.config = config || {}; // create a local reference to the drag and drop manager this.DDM = YAHOO.util.DDM; // initialize the groups array this.groups = {}; // assume that we have an element reference instead of an id if the // parameter is not a string if (typeof id !== "string") { id = Dom.generateId(id); } // set the id this.id = id; // add to an interaction group this.addToGroup((sGroup) ? sGroup : "default"); // We don't want to register this as the handle with the manager // so we just set the id rather than calling the setter. this.handleElId = id; Event.onAvailable(id, this.handleOnAvailable, this, true); // the linked element is the element that gets dragged by default this.setDragElId(id); // by default, clicked anchors will not start drag operations. // @TODO what else should be here? Probably form fields. this.invalidHandleTypes = { A: "A" }; this.invalidHandleIds = {}; this.invalidHandleClasses = []; this.applyConfig(); }, /** * Applies the configuration parameters that were passed into the constructor. * This is supposed to happen at each level through the inheritance chain. So * a DDProxy implentation will execute apply config on DDProxy, DD, and * DragDrop in order to get all of the parameters that are available in * each object. * @method applyConfig */ applyConfig: function() { // configurable properties: // padding, isTarget, maintainOffset, primaryButtonOnly this.padding = this.config.padding || [0, 0, 0, 0]; this.isTarget = (this.config.isTarget !== false); this.maintainOffset = (this.config.maintainOffset); this.primaryButtonOnly = (this.config.primaryButtonOnly !== false); }, /** * Executed when the linked element is available * @method handleOnAvailable * @private */ handleOnAvailable: function() { this.available = true; this.resetConstraints(); this.onAvailable(); }, /** * Configures the padding for the target zone in px. Effectively expands * (or reduces) the virtual object size for targeting calculations. * Supports css-style shorthand; if only one parameter is passed, all sides * will have that padding, and if only two are passed, the top and bottom * will have the first param, the left and right the second. * @method setPadding * @param {int} iTop Top pad * @param {int} iRight Right pad * @param {int} iBot Bot pad * @param {int} iLeft Left pad */ setPadding: function(iTop, iRight, iBot, iLeft) { // this.padding = [iLeft, iRight, iTop, iBot]; if (!iRight && 0 !== iRight) { this.padding = [iTop, iTop, iTop, iTop]; } else if (!iBot && 0 !== iBot) { this.padding = [iTop, iRight, iTop, iRight]; } else { this.padding = [iTop, iRight, iBot, iLeft]; } }, /** * Stores the initial placement of the linked element. * @method setInitialPosition * @param {int} diffX the X offset, default 0 * @param {int} diffY the Y offset, default 0 * @private */ setInitPosition: function(diffX, diffY) { var el = this.getEl(); if (!this.DDM.verifyEl(el)) { return; } var dx = diffX || 0; var dy = diffY || 0; var p = Dom.getXY( el ); this.initPageX = p[0] - dx; this.initPageY = p[1] - dy; this.lastPageX = p[0]; this.lastPageY = p[1]; this.setStartPosition(p); }, /** * Sets the start position of the element. This is set when the obj * is initialized, the reset when a drag is started. * @method setStartPosition * @param pos current position (from previous lookup) * @private */ setStartPosition: function(pos) { var p = pos || Dom.getXY(this.getEl()); this.deltaSetXY = null; this.startPageX = p[0]; this.startPageY = p[1]; }, /** * Add this instance to a group of related drag/drop objects. All * instances belong to at least one group, and can belong to as many * groups as needed. * @method addToGroup * @param sGroup {string} the name of the group */ addToGroup: function(sGroup) { this.groups[sGroup] = true; this.DDM.regDragDrop(this, sGroup); }, /** * Remove's this instance from the supplied interaction group * @method removeFromGroup * @param {string} sGroup The group to drop */ removeFromGroup: function(sGroup) { if (this.groups[sGroup]) { delete this.groups[sGroup]; } this.DDM.removeDDFromGroup(this, sGroup); }, /** * Allows you to specify that an element other than the linked element * will be moved with the cursor during a drag * @method setDragElId * @param id {string} the id of the element that will be used to initiate the drag */ setDragElId: function(id) { this.dragElId = id; }, /** * Allows you to specify a child of the linked element that should be * used to initiate the drag operation. An example of this would be if * you have a content div with text and links. Clicking anywhere in the * content area would normally start the drag operation. Use this method * to specify that an element inside of the content div is the element * that starts the drag operation. * @method setHandleElId * @param id {string} the id of the element that will be used to * initiate the drag. */ setHandleElId: function(id) { if (typeof id !== "string") { id = Dom.generateId(id); } this.handleElId = id; this.DDM.regHandle(this.id, id); }, /** * Allows you to set an element outside of the linked element as a drag * handle * @method setOuterHandleElId * @param id the id of the element that will be used to initiate the drag */ setOuterHandleElId: function(id) { if (typeof id !== "string") { id = Dom.generateId(id); } Event.on(id, "mousedown", this.handleMouseDown, this, true); this.setHandleElId(id); this.hasOuterHandles = true; }, /** * Remove all drag and drop hooks for this element * @method unreg */ unreg: function() { Event.removeListener(this.id, "mousedown", this.handleMouseDown); this._domRef = null; this.DDM._remove(this); }, /** * Returns true if this instance is locked, or the drag drop mgr is locked * (meaning that all drag/drop is disabled on the page.) * @method isLocked * @return {boolean} true if this obj or all drag/drop is locked, else * false */ isLocked: function() { return (this.DDM.isLocked() || this.locked); }, /** * Fired when this object is clicked * @method handleMouseDown * @param {Event} e * @param {YAHOO.util.DragDrop} oDD the clicked dd object (this dd obj) * @private */ handleMouseDown: function(e, oDD) { var button = e.which || e.button; if (this.primaryButtonOnly && button > 1) { return; } if (this.isLocked()) { return; } // firing the mousedown events prior to calculating positions this.b4MouseDown(e); this.onMouseDown(e); this.DDM.refreshCache(this.groups); // var self = this; // setTimeout( function() { self.DDM.refreshCache(self.groups); }, 0); // Only process the event if we really clicked within the linked // element. The reason we make this check is that in the case that // another element was moved between the clicked element and the // cursor in the time between the mousedown and mouseup events. When // this happens, the element gets the next mousedown event // regardless of where on the screen it happened. var pt = new YAHOO.util.Point(Event.getPageX(e), Event.getPageY(e)); if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) { } else { if (this.clickValidator(e)) { // set the initial element position this.setStartPosition(); // start tracking mousemove distance and mousedown time to // determine when to start the actual drag this.DDM.handleMouseDown(e, this); // this mousedown is mine this.DDM.stopEvent(e); } else { } } }, clickValidator: function(e) { var target = Event.getTarget(e); return ( this.isValidHandleChild(target) && (this.id == this.handleElId || this.DDM.handleWasClicked(target, this.id)) ); }, /** * Finds the location the element should be placed if we want to move * it to where the mouse location less the click offset would place us. * @method getTargetCoord * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click * @return an object that contains the coordinates (Object.x and Object.y) * @private */ getTargetCoord: function(iPageX, iPageY) { var x = iPageX - this.deltaX; var y = iPageY - this.deltaY; if (this.constrainX) { if (x < this.minX) { x = this.minX; } if (x > this.maxX) { x = this.maxX; } } if (this.constrainY) { if (y < this.minY) { y = this.minY; } if (y > this.maxY) { y = this.maxY; } } x = this.getTick(x, this.xTicks); y = this.getTick(y, this.yTicks); return {x:x, y:y}; }, /** * Allows you to specify a tag name that should not start a drag operation * when clicked. This is designed to facilitate embedding links within a * drag handle that do something other than start the drag. * @method addInvalidHandleType * @param {string} tagName the type of element to exclude */ addInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); this.invalidHandleTypes[type] = type; }, /** * Lets you to specify an element id for a child of a drag handle * that should not initiate a drag * @method addInvalidHandleId * @param {string} id the element id of the element you wish to ignore */ addInvalidHandleId: function(id) { if (typeof id !== "string") { id = Dom.generateId(id); } this.invalidHandleIds[id] = id; }, /** * Lets you specify a css class of elements that will not initiate a drag * @method addInvalidHandleClass * @param {string} cssClass the class of the elements you wish to ignore */ addInvalidHandleClass: function(cssClass) { this.invalidHandleClasses.push(cssClass); }, /** * Unsets an excluded tag name set by addInvalidHandleType * @method removeInvalidHandleType * @param {string} tagName the type of element to unexclude */ removeInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); // this.invalidHandleTypes[type] = null; delete this.invalidHandleTypes[type]; }, /** * Unsets an invalid handle id * @method removeInvalidHandleId * @param {string} id the id of the element to re-enable */ removeInvalidHandleId: function(id) { if (typeof id !== "string") { id = Dom.generateId(id); } delete this.invalidHandleIds[id]; }, /** * Unsets an invalid css class * @method removeInvalidHandleClass * @param {string} cssClass the class of the element(s) you wish to * re-enable */ removeInvalidHandleClass: function(cssClass) { for (var i=0, len=this.invalidHandleClasses.length; i= this.minX; i = i - iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } this.xTicks.sort(this.DDM.numericSort) ; }, /** * Create the array of vertical tick marks if an interval was specified in * setYConstraint(). * @method setYTicks * @private */ setYTicks: function(iStartY, iTickSize) { this.yTicks = []; this.yTickSize = iTickSize; var tickMap = {}; for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } this.yTicks.sort(this.DDM.numericSort) ; }, /** * By default, the element can be dragged any place on the screen. Use * this method to limit the horizontal travel of the element. Pass in * 0,0 for the parameters if you want to lock the drag to the y axis. * @method setXConstraint * @param {int} iLeft the number of pixels the element can move to the left * @param {int} iRight the number of pixels the element can move to the * right * @param {int} iTickSize optional parameter for specifying that the * element * should move iTickSize pixels at a time. */ setXConstraint: function(iLeft, iRight, iTickSize) { this.leftConstraint = parseInt(iLeft, 10); this.rightConstraint = parseInt(iRight, 10); this.minX = this.initPageX - this.leftConstraint; this.maxX = this.initPageX + this.rightConstraint; if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); } this.constrainX = true; }, /** * Clears any constraints applied to this instance. Also clears ticks * since they can't exist independent of a constraint at this time. * @method clearConstraints */ clearConstraints: function() { this.constrainX = false; this.constrainY = false; this.clearTicks(); }, /** * Clears any tick interval defined for this instance * @method clearTicks */ clearTicks: function() { this.xTicks = null; this.yTicks = null; this.xTickSize = 0; this.yTickSize = 0; }, /** * By default, the element can be dragged any place on the screen. Set * this to limit the vertical travel of the element. Pass in 0,0 for the * parameters if you want to lock the drag to the x axis. * @method setYConstraint * @param {int} iUp the number of pixels the element can move up * @param {int} iDown the number of pixels the element can move down * @param {int} iTickSize optional parameter for specifying that the * element should move iTickSize pixels at a time. */ setYConstraint: function(iUp, iDown, iTickSize) { this.topConstraint = parseInt(iUp, 10); this.bottomConstraint = parseInt(iDown, 10); this.minY = this.initPageY - this.topConstraint; this.maxY = this.initPageY + this.bottomConstraint; if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); } this.constrainY = true; }, /** * resetConstraints must be called if you manually reposition a dd element. * @method resetConstraints * @param {boolean} maintainOffset */ resetConstraints: function() { // Maintain offsets if necessary if (this.initPageX || this.initPageX === 0) { // figure out how much this thing has moved var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0; var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0; this.setInitPosition(dx, dy); // This is the first time we have detected the element's position } else { this.setInitPosition(); } if (this.constrainX) { this.setXConstraint( this.leftConstraint, this.rightConstraint, this.xTickSize ); } if (this.constrainY) { this.setYConstraint( this.topConstraint, this.bottomConstraint, this.yTickSize ); } }, /** * Normally the drag element is moved pixel by pixel, but we can specify * that it move a number of pixels at a time. This method resolves the * location when we have it set up like this. * @method getTick * @param {int} val where we want to place the object * @param {int[]} tickArray sorted array of valid points * @return {int} the closest tick * @private */ getTick: function(val, tickArray) { if (!tickArray) { // If tick interval is not defined, it is effectively 1 pixel, // so we return the value passed to us. return val; } else if (tickArray[0] >= val) { // The value is lower than the first tick, so we return the first // tick. return tickArray[0]; } else { for (var i=0, len=tickArray.length; i= val) { var diff1 = val - tickArray[i]; var diff2 = tickArray[next] - val; return (diff2 > diff1) ? tickArray[i] : tickArray[next]; } } // The value is larger than the last tick, so we return the last // tick. return tickArray[tickArray.length - 1]; } }, /** * toString method * @method toString * @return {string} string representation of the dd obj */ toString: function() { return ("DragDrop " + this.id); } }; })(); /** * A DragDrop implementation where the linked element follows the * mouse cursor during a drag. * @class DD * @extends YAHOO.util.DragDrop * @constructor * @param {String} id the id of the linked element * @param {String} sGroup the group of related DragDrop items * @param {object} config an object containing configurable attributes * Valid properties for DD: * scroll */ YAHOO.util.DD = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); } }; YAHOO.extend(YAHOO.util.DD, YAHOO.util.DragDrop, { /** * When set to true, the utility automatically tries to scroll the browser * window wehn a drag and drop element is dragged near the viewport boundary. * Defaults to true. * @property scroll * @type boolean */ scroll: true, /** * Sets the pointer offset to the distance between the linked element's top * left corner and the location the element was clicked * @method autoOffset * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click */ autoOffset: function(iPageX, iPageY) { var x = iPageX - this.startPageX; var y = iPageY - this.startPageY; this.setDelta(x, y); }, /** * Sets the pointer offset. You can call this directly to force the * offset to be in a particular location (e.g., pass in 0,0 to set it * to the center of the object, as done in YAHOO.widget.Slider) * @method setDelta * @param {int} iDeltaX the distance from the left * @param {int} iDeltaY the distance from the top */ setDelta: function(iDeltaX, iDeltaY) { this.deltaX = iDeltaX; this.deltaY = iDeltaY; }, /** * Sets the drag element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * @method setDragElPos * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ setDragElPos: function(iPageX, iPageY) { // the first time we do this, we are going to check to make sure // the element has css positioning var el = this.getDragEl(); this.alignElWithMouse(el, iPageX, iPageY); }, /** * Sets the element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * @method alignElWithMouse * @param {HTMLElement} el the element to move * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ alignElWithMouse: function(el, iPageX, iPageY) { var oCoord = this.getTargetCoord(iPageX, iPageY); if (!this.deltaSetXY) { var aCoord = [oCoord.x, oCoord.y]; YAHOO.util.Dom.setXY(el, aCoord); var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 ); var newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 ); this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ]; } else { YAHOO.util.Dom.setStyle(el, "left", (oCoord.x + this.deltaSetXY[0]) + "px"); YAHOO.util.Dom.setStyle(el, "top", (oCoord.y + this.deltaSetXY[1]) + "px"); } this.cachePosition(oCoord.x, oCoord.y); this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth); }, /** * Saves the most recent position so that we can reset the constraints and * tick marks on-demand. We need to know this so that we can calculate the * number of pixels the element is offset from its original position. * @method cachePosition * @param iPageX the current x position (optional, this just makes it so we * don't have to look it up again) * @param iPageY the current y position (optional, this just makes it so we * don't have to look it up again) */ cachePosition: function(iPageX, iPageY) { if (iPageX) { this.lastPageX = iPageX; this.lastPageY = iPageY; } else { var aCoord = YAHOO.util.Dom.getXY(this.getEl()); this.lastPageX = aCoord[0]; this.lastPageY = aCoord[1]; } }, /** * Auto-scroll the window if the dragged object has been moved beyond the * visible window boundary. * @method autoScroll * @param {int} x the drag element's x position * @param {int} y the drag element's y position * @param {int} h the height of the drag element * @param {int} w the width of the drag element * @private */ autoScroll: function(x, y, h, w) { if (this.scroll) { // The client height var clientH = this.DDM.getClientHeight(); // The client width var clientW = this.DDM.getClientWidth(); // The amt scrolled down var st = this.DDM.getScrollTop(); // The amt scrolled right var sl = this.DDM.getScrollLeft(); // Location of the bottom of the element var bot = h + y; // Location of the right of the element var right = w + x; // The distance from the cursor to the bottom of the visible area, // adjusted so that we don't scroll if the cursor is beyond the // element drag constraints var toBot = (clientH + st - y - this.deltaY); // The distance from the cursor to the right of the visible area var toRight = (clientW + sl - x - this.deltaX); // How close to the edge the cursor must be before we scroll // var thresh = (document.all) ? 100 : 40; var thresh = 40; // How many pixels to scroll per autoscroll op. This helps to reduce // clunky scrolling. IE is more sensitive about this ... it needs this // value to be higher. var scrAmt = (document.all) ? 80 : 30; // Scroll down if we are near the bottom of the visible page and the // obj extends below the crease if ( bot > clientH && toBot < thresh ) { window.scrollTo(sl, st + scrAmt); } // Scroll up if the window is scrolled down and the top of the object // goes above the top border if ( y < st && st > 0 && y - st < thresh ) { window.scrollTo(sl, st - scrAmt); } // Scroll right if the obj is beyond the right border and the cursor is // near the border. if ( right > clientW && toRight < thresh ) { window.scrollTo(sl + scrAmt, st); } // Scroll left if the window has been scrolled to the right and the obj // extends past the left border if ( x < sl && sl > 0 && x - sl < thresh ) { window.scrollTo(sl - scrAmt, st); } } }, /* * Sets up config options specific to this class. Overrides * YAHOO.util.DragDrop, but all versions of this method through the * inheritance chain are called */ applyConfig: function() { YAHOO.util.DD.superclass.applyConfig.call(this); this.scroll = (this.config.scroll !== false); }, /* * Event that fires prior to the onMouseDown event. Overrides * YAHOO.util.DragDrop. */ b4MouseDown: function(e) { this.setStartPosition(); // this.resetConstraints(); this.autoOffset(YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)); }, /* * Event that fires prior to the onDrag event. Overrides * YAHOO.util.DragDrop. */ b4Drag: function(e) { this.setDragElPos(YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)); }, toString: function() { return ("DD " + this.id); } ////////////////////////////////////////////////////////////////////////// // Debugging ygDragDrop events that can be overridden ////////////////////////////////////////////////////////////////////////// /* startDrag: function(x, y) { }, onDrag: function(e) { }, onDragEnter: function(e, id) { }, onDragOver: function(e, id) { }, onDragOut: function(e, id) { }, onDragDrop: function(e, id) { }, endDrag: function(e) { } */ }); /** * A DragDrop implementation that inserts an empty, bordered div into * the document that follows the cursor during drag operations. At the time of * the click, the frame div is resized to the dimensions of the linked html * element, and moved to the exact location of the linked element. * * References to the "frame" element refer to the single proxy element that * was created to be dragged in place of all DDProxy elements on the * page. * * @class DDProxy * @extends YAHOO.util.DD * @constructor * @param {String} id the id of the linked html element * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDProxy in addition to those in DragDrop: * resizeFrame, centerFrame, dragElId */ YAHOO.util.DDProxy = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); this.initFrame(); } }; /** * The default drag frame div id * @property YAHOO.util.DDProxy.dragElId * @type String * @static */ YAHOO.util.DDProxy.dragElId = "ygddfdiv"; YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD, { /** * By default we resize the drag frame to be the same size as the element * we want to drag (this is to get the frame effect). We can turn it off * if we want a different behavior. * @property resizeFrame * @type boolean */ resizeFrame: true, /** * By default the frame is positioned exactly where the drag element is, so * we use the cursor offset provided by YAHOO.util.DD. Another option that works only if * you do not have constraints on the obj is to have the drag frame centered * around the cursor. Set centerFrame to true for this effect. * @property centerFrame * @type boolean */ centerFrame: false, /** * Creates the proxy element if it does not yet exist * @method createFrame */ createFrame: function() { var self = this; var body = document.body; if (!body || !body.firstChild) { setTimeout( function() { self.createFrame(); }, 50 ); return; } var div = this.getDragEl(); if (!div) { div = document.createElement("div"); div.id = this.dragElId; var s = div.style; s.position = "absolute"; s.visibility = "hidden"; s.cursor = "move"; s.border = "2px solid #aaa"; s.zIndex = 999; // appendChild can blow up IE if invoked prior to the window load event // while rendering a table. It is possible there are other scenarios // that would cause this to happen as well. body.insertBefore(div, body.firstChild); } }, /** * Initialization for the drag frame element. Must be called in the * constructor of all subclasses * @method initFrame */ initFrame: function() { this.createFrame(); }, applyConfig: function() { YAHOO.util.DDProxy.superclass.applyConfig.call(this); this.resizeFrame = (this.config.resizeFrame !== false); this.centerFrame = (this.config.centerFrame); this.setDragElId(this.config.dragElId || YAHOO.util.DDProxy.dragElId); }, /** * Resizes the drag frame to the dimensions of the clicked object, positions * it over the object, and finally displays it * @method showFrame * @param {int} iPageX X click position * @param {int} iPageY Y click position * @private */ showFrame: function(iPageX, iPageY) { var el = this.getEl(); var dragEl = this.getDragEl(); var s = dragEl.style; this._resizeProxy(); if (this.centerFrame) { this.setDelta( Math.round(parseInt(s.width, 10)/2), Math.round(parseInt(s.height, 10)/2) ); } this.setDragElPos(iPageX, iPageY); YAHOO.util.Dom.setStyle(dragEl, "visibility", "visible"); }, /** * The proxy is automatically resized to the dimensions of the linked * element when a drag is initiated, unless resizeFrame is set to false * @method _resizeProxy * @private */ _resizeProxy: function() { if (this.resizeFrame) { var DOM = YAHOO.util.Dom; var el = this.getEl(); var dragEl = this.getDragEl(); var bt = parseInt( DOM.getStyle(dragEl, "borderTopWidth" ), 10); var br = parseInt( DOM.getStyle(dragEl, "borderRightWidth" ), 10); var bb = parseInt( DOM.getStyle(dragEl, "borderBottomWidth" ), 10); var bl = parseInt( DOM.getStyle(dragEl, "borderLeftWidth" ), 10); if (isNaN(bt)) { bt = 0; } if (isNaN(br)) { br = 0; } if (isNaN(bb)) { bb = 0; } if (isNaN(bl)) { bl = 0; } var newWidth = Math.max(0, el.offsetWidth - br - bl); var newHeight = Math.max(0, el.offsetHeight - bt - bb); DOM.setStyle( dragEl, "width", newWidth + "px" ); DOM.setStyle( dragEl, "height", newHeight + "px" ); } }, // overrides YAHOO.util.DragDrop b4MouseDown: function(e) { this.setStartPosition(); var x = YAHOO.util.Event.getPageX(e); var y = YAHOO.util.Event.getPageY(e); this.autoOffset(x, y); this.setDragElPos(x, y); }, // overrides YAHOO.util.DragDrop b4StartDrag: function(x, y) { // show the drag frame this.showFrame(x, y); }, // overrides YAHOO.util.DragDrop b4EndDrag: function(e) { YAHOO.util.Dom.setStyle(this.getDragEl(), "visibility", "hidden"); }, // overrides YAHOO.util.DragDrop // By default we try to move the element to the last location of the frame. // This is so that the default behavior mirrors that of YAHOO.util.DD. endDrag: function(e) { var DOM = YAHOO.util.Dom; var lel = this.getEl(); var del = this.getDragEl(); // Show the drag frame briefly so we can get its position // del.style.visibility = ""; DOM.setStyle(del, "visibility", ""); // Hide the linked element before the move to get around a Safari // rendering bug. //lel.style.visibility = "hidden"; DOM.setStyle(lel, "visibility", "hidden"); YAHOO.util.DDM.moveToEl(lel, del); //del.style.visibility = "hidden"; DOM.setStyle(del, "visibility", "hidden"); //lel.style.visibility = ""; DOM.setStyle(lel, "visibility", ""); }, toString: function() { return ("DDProxy " + this.id); } }); /** * A DragDrop implementation that does not move, but can be a drop * target. You would get the same result by simply omitting implementation * for the event callbacks, but this way we reduce the processing cost of the * event listener and the callbacks. * @class DDTarget * @extends YAHOO.util.DragDrop * @constructor * @param {String} id the id of the element that is a drop target * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDTarget in addition to those in * DragDrop: * none */ YAHOO.util.DDTarget = function(id, sGroup, config) { if (id) { this.initTarget(id, sGroup, config); } }; // YAHOO.util.DDTarget.prototype = new YAHOO.util.DragDrop(); YAHOO.extend(YAHOO.util.DDTarget, YAHOO.util.DragDrop, { toString: function() { return ("DDTarget " + this.id); } }); YAHOO.register("dragdrop", YAHOO.util.DragDropMgr, {version: "2.2.2", build: "204"}); var HPConfig={current_vertical_name:'',current_web_address:'',timestamp_for_clearing_js:0} var HPFBConfig={FACEBOOK_COMMENTS_BUNDLE_ID:48114987133,FACEBOOK_PLEDGE_BUNDLE_ID:48114517133,FACEBOOK_JOIN_PLEDGE_BUNDLE_ID:48114517133,FACEBOOK_VOTE_BUNDLE_ID:81637352133,FACEBOOK_VOTEPREVIEW_BUNDLE_ID:53483022133,FACEBOOK_POLL_BUNDLE_ID:81637352133,FACEBOOK_SLIDESHOW_POLL_BUNDLE_ID:95176577133} var jimAuld=window.jimAuld||{};jimAuld.utils=jimAuld.utils||{};jimAuld.utils.cookies={get:function(cookieName){var cookieNameStart,valueStart,valueEnd,value;cookieNameStart=document.cookie.indexOf(cookieName+'=');if(cookieNameStart<0){return null;} valueStart=document.cookie.indexOf(cookieName+'=')+cookieName.length+1;valueEnd=document.cookie.indexOf(";",valueStart);if(valueEnd==-1){valueEnd=document.cookie.length;} value=document.cookie.substring(valueStart,valueEnd);value=unescape(value);if(value==""){return null;} return value;},set:function(cookieName,value,hoursToLive,path,domain,secure){var expireString,timerObj,expireAt,pathString,domainString,secureString,setCookieString;if(!hoursToLive||typeof hoursToLive!='number'||parseInt(hoursToLive)=='NaN'){expireString="";} else{timerObj=new Date();timerObj.setTime(timerObj.getTime()+(parseInt(hoursToLive)*60*60*1000));expireAt=timerObj.toGMTString();expireString="; expires="+expireAt;} pathString="; path=";(!path||path=="")?pathString+="/":pathString+=path;domainString="; domain=";(!domain||domain=="")?domainString+=window.location.hostname.replace(/www\./,''):domainString+=domain;(secure===true)?secureString="; secure":secureString="";value=escape(value);setCookieString=cookieName+"="+value+expireString+pathString+domainString;document.cookie=setCookieString;},del:function(cookieName,path,domain){(!path||!path.length)?path="":path=path;(!domain||!domain.length)?domain="":domain=domain;jimAuld.utils.cookies.set(cookieName,"",-8760,path,domain);},test:function(){jimAuld.utils.cookies.set('cT','acc');var runTest=jimAuld.utils.cookies.get('cT');if(runTest=='acc'){jimAuld.utils.cookies.del('cT');testStatus=true;} else{testStatus=false;}return testStatus;}};var HuffCookies=jimAuld.utils.cookies;HuffCookies.getUserName=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_user':'huffpost_user'));};HuffCookies.getUserGuid=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_user_guid':'huffpost_user_guid'));};HuffCookies.getPass=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_pass':'huffpost_pass'));};HuffCookies.getLastLogin=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_lastlogin':'huffpost_lastlogin'));};HuffCookies.getBigAvatar=function(){var c=this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_bigphoto':'huffpost_bigphoto'));if(!c||c==''){return'';}else{return c;}};HuffCookies.getSmallAvatar=function(){var c=this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_smallphoto':'huffpost_smallphoto'));if(!c||c==''){return'';}else{return c;}};HuffCookies.getSNPstatus=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_snp_status':'huffpost_snp_status'));};HuffCookies.getReadTrackingStatus=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_snp_read':'huffpost_snp_read'));};HuffCookies.setCookie=function(cookieName,value,ttl){var cookie_preffix=(/\.beta\./.test(location.hostname))?'beta'+location.port+'_':'';var domain=location.hostname;domain=domain.replace(/www\./,'');if(!ttl)ttl=336;return this.set(cookie_preffix+cookieName,value,ttl,'/','.'+domain);};HuffCookies.getCookie=function(cookieName){var cookie_preffix=(/\.beta\./.test(location.hostname))?'beta'+location.port+'_':'';var domain=location.hostname;domain=domain.replace(/www\./,'');return this.get(cookie_preffix+cookieName);};HuffCookies.domainCookie=function(){var domain=location.hostname;domain=domain.replace(/www\./,'');return domain;};HuffCookies.getUserId=function(){return this.get(((/\.beta\./.test(location.hostname))?'beta'+location.port+'_huffpost_user_id':'huffpost_user_id'));};HuffCookies.destroyCookie=function(name){var prefix=(/\.beta\./.test(location.hostname))?'beta'+location.port+'_':'';return this.del(prefix+name,'/','.'+HuffCookies.domainCookie());}; var JSON=function(){var m={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'},s={'boolean':function(x){return String(x);},number:function(x){return isFinite(x)?String(x):'null';},string:function(x){if(/["\\\x00-\x1f]/.test(x)){x=x.replace(/([\x00-\x1f\\"])/g,function(a,b){var c=m[b];if(c){return c;} c=b.charCodeAt();return'\\u00'+ Math.floor(c/16).toString(16)+ (c%16).toString(16);});} return'"'+x+'"';},object:function(x){if(x){var a=[],b,f,i,l,v;if(x instanceof Array){a[0]='[';l=x.length;for(i=0;i'+html;break;case'top':return html+'
';break;}}} var HPEventModule={js_main_modules_loaded:{},js_events_loaded:{},yui_version_default:'2.7.0',events_dependencies:{'slideshow_participate':{immediately:{'our':['quickslideshowparticipate','hpimagecrop']},delayed:{'yui':{'button':'default','resize':'default','imagecropper':'default','dragdrop':'default'}}}},modules_loaded:{},yui_modules_loaded:{},Load:function(event_name,callback,scope,args) {scope=scope||this;args=args||[];callback=callback||(function(){});if(this.js_events_loaded[event_name]) {callback.apply(scope,args);} else {var me=this;this._LoadModules(event_name,function(){callback.apply(scope,args);});}},Wait:function(event_name,callback,preloading_callback,wait_for_delayed_modules,scope) {if(preloading_callback) {preloading_callback();} wait_for_delayed_modules=(undefined===wait_for_delayed_modules)?true:wait_for_delayed_modules;scope=scope||this;var me=this;HPUtil.WaitForCondition.apply(scope,[function(){setTimeout(function(){callback.apply(scope);},100)},1,function(){return!wait_for_delayed_modules?me.js_main_modules_loaded[event_name]:me.js_events_loaded[event_name]}]);},_LoadModules:function(event_name,callback,type_dependencies) {callback=callback||(function(){});type_dependencies=type_dependencies||'immediately';var events_dependencies=this.events_dependencies[event_name][type_dependencies];var loading_url='/assets/js.php?'+HPConfig.timestamp_for_clearing_js+'&f=';var needed_modules=[],module_name='';if(events_dependencies['our']) {for(var i=0;i':return_text+='\\x3E';break;case'\'':return_text+='\\\'';break;case'\\':return_text+='\\\\';break;case'"':return_text+='\\"';break;case"\n":return_text+='\\n';break;case"\r":return_text+='\\r';break;default:return_text+=text.charAt(i);break;}} return return_text;},getHostName:function() {var port=document.location.port;if(!port||port==''||port==80) {port='';} else {port=':'+port;} return'http://'+document.location.hostname+port;},GetAmazonS3Location:function() {return-1!==location.href.toLowerCase().indexOf('beta.huffingtonpost.com')?'dev.assets.huffingtonpost.com':'images.huffingtonpost.com';},LinkifyTextLinks:function(arg) {return arg.replace(/[a-z]+:\/\/[a-z0-9-_]+\.[a-z0-9-_:~%&\?\/.=]+[^:\.,\)\s*$]/ig,function(m){return''+((m.length>25)?m.substr(0,24)+'...':m)+'';});},GetEntryID:function(url){var entry_id=null;if(!url)url=document.location.href;if((entry_id=(new RegExp(/.*huffingtonpost\.com.*_(\d+)\.html/)).exec(url))) {return entry_id[1];} return false;},isWWW:function(url){if(!url)url=window.location.href+'';if(url.indexOf("www")==7)return true;return false;},hide:function(id){D.setStyle(id,'display','none');},show:function(id,type){if(typeof(type)=="undefined") type='block';D.setStyle(id,'display',type);},show_inline:function(id){D.setStyle(id,'display','inline');},trim:function(str,chars){return this.ltrim(this.rtrim(str,chars),chars);},ltrim:function(str,chars){chars=chars||"\\s";return str.replace(new RegExp("^["+chars+"]+","g"),"");},rtrim:function(str,chars){chars=chars||"\\s";return str.replace(new RegExp("["+chars+"]+$","g"),"");},toggleVis:function(id){D.batch(id,function(el){if(el.style.display=='none')el.style.display='block';else el.style.display='none';});},toggleReply:function(id){D.batch('reply_'+id,function(el){if(el.style.display=='none')el.style.display='block';else el.style.display='none';});},toggleTopPosts:function(caller){if(!D.hasClass(caller,'active')) {HuffPoUtil.toggleVis(['top_news_links','top_blog_links']);HuffPoUtil.tradeClass('tab_top_news','tab_top_blogs','active');}},tradeClass:function(el1,el2,className) {if(D.hasClass(el1,className)) {D.addClass(el2,className);D.removeClass(el1,className);} else {D.addClass(el1,className);D.removeClass(el2,className);}},WaitForCondition:function(action,interval,condition) {if(!condition.apply(this)) {var _this=this;setTimeout(function(){HPUtil.WaitForCondition.apply(_this,[action,interval,condition]);},interval);} else {action.apply(this);}},AnimRequestFinished:function(els,from_color,to_color) {if(undefined===els) {els=[];} from_color=from_color||'#F9E801';to_color=to_color||'#FFFFFF';if(0==els.length) return;var canim=[];for(var i=0;i');},checkEmail:function(email){if(email&&((email.indexOf('@')>0)&&(email.indexOf('.')>0))&&(email.indexOf('.')!=email.length-1)){return true;} return false;},flash:function(element){var flashwarn=new YAHOO.util.ColorAnim(element,{backgroundColor:{from:'#ff0000',to:'#ffffff'}});flashwarn.animate();},yellowFlash:function(element){var flashwarn=new YAHOO.util.ColorAnim(element,{backgroundColor:{from:'#F9E801',to:'#ffffff'}});flashwarn.animate();},enforceTextAreaLimit:function(e,obj){if(!obj||!obj.chars)obj={chars:100};if(this.value.length>obj.chars){HuffPoUtil.flash(this);this.value=this.value.substring(0,obj.chars);this.scrollTop=this.scrollHeight;}},reinit:function() {HPUtil.initUserNavStatus($('n_pre_nav')?true:false);HPUtil.initUserStatus(true);SNProject.init();SNPModule.load();},initUserNavStatus:function(vert_header) {if(typeof HuffCookies=='undefined'||!HPUtil.isWWW()||!HuffCookies.getUserName())return;if(HuffCookies.getSNPstatus()==1) {D.addClass(document.body,'sn_signed_in');} var this_user_profile_link=HuffCookies.getSNPstatus()?'/social/':'/users/profile/';this_user_profile_link+=HuffCookies.getUserName();if(vert_header) {D.setStyle('n_pre_nav','marginTop','-3px');HuffPoUtil.AvatarLoader.loadAvatarArticleStyle();} else {D.setStyle('pre_nav','paddingBottom','15px');} var welcome='';welcome+='Welcome '+HuffCookies.getUserName().replace(/[\+_]/g,' ')+'';$('wendybird_user_name').innerHTML=welcome;$('wendybird_user').style.display='block';$('not_logged_user').style.display='none';SNProject.closeLinkBar();},initUserStatus:function(updating){if(!HPUtil.isWWW())return;if(HuffCookies.get('user_is_not_approved')) {HuffCookies.del('user_is_not_approved');HPError.e('Your account has not yet been activated');window.location.reload();return;} if(HuffCookies.get('snn_track_user_logged_in')&&typeof(SNProject)!="undefined") {SNProject.track(HuffCookies.getUserId(),'user_log_in');HuffCookies.del('snn_track_user_logged_in');} if(HuffCookies.getSNPstatus()==1) {D.addClass(document.body,'sn_signed_in');} if(!updating&&HuffCookies.getUserId()&&(HuffCookies.getSNPstatus()==null||HuffCookies.getReadTrackingStatus()==null)) {var cv=HuffCookies.get('snp_for_cookie_restore');var d=new Date();if(!cv) {HuffCookies.set('snp_for_cookie_restore',d.getTime());} else if(d.getTime()-cv>5*60*1000) {C.asyncRequest('GET','/users/social_news_project/snp_cookie_restore.php',{success:function(o){}});if(HuffCookies.getSNPstatus()==null||HuffCookies.getReadTrackingStatus()==null) {var d=new Date();HuffCookies.set('snp_for_cookie_restore',d.getTime());} else {HuffCookies.del('snp_for_cookie_restore');}}} if(typeof(HPFB)=='undefined')return false;setTimeout(function() {var t=new Date;t=t.getTime();t=parseInt(t/1000);var OFFSET=86400;if(HuffCookies.getLastLogin()&&HuffCookies.getLastLogin()!='') {if(parseInt(HuffCookies.getLastLogin())+OFFSET')+8-video_code.toLowerCase().indexOf('';}else{profile_pic.innerHTML='';} profile_pic.style.width='50px';profile_pic.style.height='50px';if(Y.util.Event.isIE&&/MSIE 6.0/i.test(navigator.userAgent)) {$('masthead_inner').style.position='relative';var container_height=$('logo').offsetHeight;var el_height=15;if(container_height>89) {container_height=container_height-89;el_height=el_height+container_height;} D.setStyle(profile_pic,'position','absolute');D.setStyle(profile_pic,'right',0);D.setStyle(profile_pic,'top',''+el_height+'px');D.setStyle(profile_pic,'opacity','0.5');$('masthead_inner').appendChild(profile_pic);} else {D.setStyle(profile_pic,'top','-65px');} D.setStyle(profile_pic,'float','right');D.setStyle(profile_pic,'display','block');}},loadAvatarArticleStyle:function() {var profile_pic_link=(HuffCookies.getSNPstatus()==1)?'/social/'+this.cookie_username:'/users/profile/'+this.cookie_username;if(this.user_logged_in&&this.got_avatar_cookies&&typeof ad_ears_on=='undefined') {var avatar=$('avatar_logged_in');if(!this.got_external_avatar) {avatar.innerHTML='';avatar.style.top='-10px';avatar.style.left='-23px';} else {avatar.innerHTML='';avatar.style.left='-23px';}}},freshHuffPoAvatar:function(avatar_url) {var al=HuffPoUtil.AvatarLoader;if(/\?[0-9]+$/.test(avatar_url)&&!this.got_external_avatar&&!this.got_xfbml_avatar) {var d=new Date();var curr_month=d.getMonth();var curr_year=d.getFullYear();var curr_monthday=d.getDate();var curr_hour=d.getHours();var curr_minute=d.getMinutes();var curr_second=d.getSeconds();var suffix=''+curr_year+curr_month+curr_monthday+curr_hour+curr_minute+curr_second;return avatar_url.replace(/\?[0-9]+$/,'?'+suffix);}}},ImageLoader:{imageLoaderClass:'unloaded-image',lookAhead:300,loadFrom:'s3',timeOutId:0,handlers:[],timeOutId:0,onScrollDelay:100,onScrollDelayIE:100,_onScrollDelay:0,addHandler:function(fn) {var il=HuffPoUtil.ImageLoader;var l=il.handlers.length;il.handlers[l]=fn;if(!il._onScrollDelay) {if(E.isIE) {il._onScrollDelay=il.onScrollDelayIE;} else il._onScrollDelay=il.onScrollDelay;}},myHandlerOnScroll:function() {var il=HuffPoUtil.ImageLoader;if(il.timeOutId) {clearTimeout(il.timeOutId);} il.timeOutId=setTimeout(il.myHandler,il._onScrollDelay);},myHandler:function() {var il=HuffPoUtil.ImageLoader;for(var i=0,l=il.handlers.length;i0?add_dimensions[0]:0;parent_region.top+=add_dimensions[1]<0?add_dimensions[1]:0;parent_region.bottom+=add_dimensions[1]>0?add_dimensions[1]:0;var img_region=null,intersects=null;} for(var i=0,elPos=0;i=2&&matches[1]<7.2) {document.body.style.margin='0';}}},showad:function() {this.show('rightad');this.show('frontmidad');},externalLinks:function() {E.addListener(document.getElementsByTagName("a"),'click',function(e){if(this.href&&this.rel=="popup") {E.stopEvent(e);var height=430;var width=450;if(this.className=='commentpop') height=430;if(this.className=='biolink') width=450;var top=Math.ceil(screen.height/2)-Math.ceil(height/2);var left=Math.ceil(screen.width/2)-Math.ceil(width/2);window.open(this.href,'bio','toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=1,resizable=1,width='+width+',height='+height+',top='+top+',left='+left);} if(this.href&&typeof(urchinTracker)!="undefined") {urchinTracker("/out/?u="+this.href);}});},SharePollToFacebook:function(feed_bundle_id,vote_text,poll_question) {vote_link=''+poll_question+'';var feed_tokens={'vote_text':'voted: "'+vote_text+'" You take the poll - ','vote_link':vote_link};FB.ensureInit(function(){Modal.HideEmbed();FB.Connect.showFeedDialog(feed_bundle_id,feed_tokens,null,null,null,FB.RequireConnect.promptConnect,function(){Modal.ShowEmbed();});});},vote:function(pollId){form=$('poll_form_'+pollId);requestUrl='/polls/add_stats.php?pid='+pollId;var checked=false;var show_facebook=false;for(var i=0;i';return innerH;} else {ad_spec.prefix='http://ad.doubleclick.net/adj/';s=document.createElement('script');s.type="text/javascript";s.src=getSource(ad_spec);return s;}};getQCSegs=function() {a=HuffPoUtil.getCookie('__qseg');return(a)?a.replace(/\|{0,1}Q_/gi,';qcs=').replace(/^;/,'')+';':'';};getSource=function(ad_spec) {if(ad_spec.prefix) adSource=ad_spec.prefix;else adSource="http://ad.doubleclick.net/adi/";adSource+=ad_spec.zone_info+';global=1;';adSource+=getQCSegs();if(ad_spec.interstitial&&(typeof ads_page_type!='undefined'&&ads_page_type!='big_news')&&!(document.referrer&&document.referrer.match(/.*(yahoo|aol)\.com.*/)))adSource+="dcopt=ist;";adSource+=(test_kws=location.href.match(/dc_kw\=[^\&]*/gi))?'kw='+test_kws.toString().replace(/dc_kw\=/gi,'').replace(/\,/gi,';kw=')+';':'';adSource+=(location.href.match(/beta\./))?'kw=beta;':'';adSource+=(document.referrer.match('google.com/cse'))?'ref=hp_search;':'';adSource+=(document.referrer.match('google.com/search'))?'ref=google;':'';adSource+=(navigator.userAgent.toLowerCase().match('chrome/'))?'brsr=chrome;':'';adSource+=(typeof ads_page_type!='undefined')?'page_type='+ads_page_type+';':'';adSource+=(ad_spec.kv)?ad_spec.kv:'postload=0;';adSource+="tile="+ad_spec.tile+";";adSource+="sz="+(ad_spec.sizes||(ad_spec.width+"x"+ad_spec.height))+";";adSource+="ord="+WEDGJE_ord+"?";return adSource;};getBareScript=function(ad_spec) {if(this.isIE) {innerH='';return innerH;} else {s=document.createElement('script');s.type="text/javascript";s.src=ad_spec["src"];return s;}};ad_store={};WEDGJE_ord=Math.random();WEDGJE_ord=WEDGJE_ord*10000000000000000000;isIE=(true||(navigator.userAgent&&navigator.userAgent.match(/MSIE/)));return{double_adsense:false,ads:function(ad_name){return ad_store[ad_name];},ord:function(ad_name){return WEDGJE_ord;},debug_ad_code:function(ad_spec) {return(location.href.toLowerCase().match('debugadcode'))?'
'+getSource(ad_spec).replace(/\;/gi,';
')+'
')+'">See Ad In New Page
':'';},inline_ad:function(ad_spec) {ad_spec.prefix='http://ad.doubleclick.net/adj/';document.write(''+this.debug_ad_code(ad_spec));},postload_ad:function(ad_spec,container_id) {var width_str='height: '+ad_spec.height+'px; ';var height_str='width: '+ad_spec.width+'px; ';if(ad_spec.no_container) {width_str='';height_str='';} if(ad_spec.type=='iframe') {ad_store[ad_spec.el_id]=getIframe(ad_spec);}else if(ad_spec.type=='script'){ad_store[ad_spec.el_id]=getScript(ad_spec);}else if(ad_spec.type=='bare'){ad_store[ad_spec.el_id]=getBareScript(ad_spec);} if(isIE) {if(typeof(container_id)=="undefined") {document.write('
'+ad_store[ad_spec.el_id]+'<\/div>'+this.debug_ad_code(ad_spec));} else {$(container_id).innerHTML='
'+ad_store[ad_spec.el_id]+'<\/div>'+this.debug_ad_code(ad_spec);}} else {if(typeof(container_id)=="undefined") {document.write('
<\/div>'+this.debug_ad_code(ad_spec));} else {$(container_id).innerHTML='
<\/div>'+this.debug_ad_code(ad_spec);} setTimeout("$('"+ad_spec.el_id+"').appendChild(HuffPoUtil.WEDGJE.ads('"+ad_spec.el_id+"'));",(ad_spec.tile*200)+1);}},interstitial:true,tile:1,write:function(ad_spec,container_id) {if(!Y.util.Event.isIE&&ad_spec.width!='234'&&container_id!='ad_advertisement'&&!(typeof ads_page_type!='undefined'&&ads_page_type=='front'&&(ad_spec.zone_info.match('comedy')||ad_spec.zone_info.match('world')))||location.href.match('postload_test')) {ad_spec.interstitial=this.interstitial;this.interstitial=false;this.deferred_write(ad_spec,container_id);return;} ad_spec.tile=this.tile++;if(location.href.match('no_ads')||location.href.match('nsup'))return;if(container_id) {this.postload_ad(ad_spec,container_id)} else {ad_spec.interstitial=this.interstitial;this.interstitial=false;this.inline_ad(ad_spec)}},google_ads:{primed:false,counter:0,vars:{'ad_client':'pub-3264687723376607','ad_output':'js','max_num_ads':'3','ad_type':'text','feedback':'on' },init:function() {if(!HuffPoUtil.WEDGJE.google_ads.primed) {HuffPoUtil.WEDGJE.google_ads.primed=true;} HuffPoUtil.WEDGJE.google_ads.executions=HuffPoUtil.WEDGJE.google_ads.executions||[];var z=HuffPoUtil.WEDGJE.google_ads.executions.length;HuffPoUtil.WEDGJE.google_ads.executions[z]=[];for(var _name in HuffPoUtil.WEDGJE.google_ads.vars) {HuffPoUtil.WEDGJE.google_ads.executions[z][_name]=HuffPoUtil.WEDGJE.google_ads.vars[_name];} for(var _name in arguments[0]) {HuffPoUtil.WEDGJE.google_ads.executions[z][_name]=arguments[0][_name];}},exec:function() {if(!HuffPoUtil.WEDGJE.google_ads.executions||!HuffPoUtil.WEDGJE.google_ads.executions[0])return;var google_skip=0;for(z=0;HuffPoUtil.WEDGJE.google_ads.executions[z];z++) {var params='page_url---'+document.location.href+'*';for(_var in HuffPoUtil.WEDGJE.google_ads.executions[z]) {if(typeof HuffPoUtil.WEDGJE.google_ads.executions[z][_var]=='string') {params+=_var+'---'+HuffPoUtil.WEDGJE.google_ads.executions[z][_var]+'*';}} params=params.replace(/\*$/gi,'');iframe=document.createElement('iframe');iframe.src='/ads/google_ads_iframe_loader.html?'+escape(params);iframe.style.marginTop="10px";iframe.frameBorder='0';iframe.id='iframe_'+HuffPoUtil.WEDGJE.google_ads.executions[z]['hp_dest_id'];iframe.height=1;iframe.scrolling='no';iframe.width='100%';adloc=document.getElementById(HuffPoUtil.WEDGJE.google_ads.executions[z]['hp_dest_id'].replace(/\"/gi,''));adloc.innerHTML='';adloc.appendChild(iframe);} },render:function(google_ads) {var contextual_ad_elem=document.getElementById(google_hp_dest_id);if(google_ads.length==0||!contextual_ad_elem)return;var s='
';s+='
Ads by Google
';for(var i=0;i'+ad.line1+'
',description:'
'+ad.line2+' '+ad.line3+'
',visible_url:'
'+ad.visible_url+'
'} var google_code='
';for(var a=0;a]*>)/gi);for(key in matches){if(isNaN(key)){continue;} html=matches[key].toString();allowed=false;for(k in allowed_array){allowed_tag=allowed_array[k];i=-1;if(i!=0){i=html.toLowerCase().indexOf('<'+allowed_tag+'>');} if(i!=0){i=html.toLowerCase().indexOf('<'+allowed_tag+' ');} if(i!=0){i=html.toLowerCase().indexOf('0) {Slider.Positions[vertical]--;} else {return false;} Slider.LoadImage(vertical);D.setStyle(D.getElementsByClassName('slider_slide','div','slider_'+vertical),'display','none');D.setStyle('slider_'+vertical+"_slide_"+Slider.Positions[vertical],'display','block');if(Slider.Positions[vertical]==0) {D.addClass('slider_left_'+vertical,'slider_off');} D.removeClass('slider_right_'+vertical,'slider_off');},LoadImage:function(vertical){this_slide=$("slider_"+vertical+"_img_"+Slider.Positions[vertical]);if(this_slide&&!this_slide.src<2&&this_slide.alt) {this_slide.src=this_slide.alt;}},Positions:new Array(),Lengths:new Array()};var APwires={limit:0,Next:function(id,v_name) {if(!this.limit) {this.limit=$('ap_array_size').innerHTML;} if(id!=this.limit) {D.setStyle('ap-wires-'+id,'display','none');id++;if(id==this.limit) {$('ap-wires-Rimg'+id).style.backgroundPosition='-60px -326px';} D.setStyle('ap-wires-'+id,'display','block');} else {return false;}},Prev:function(id) {if(id!=1) {D.setStyle('ap-wires-'+id,'display','none');id--;D.setStyle('ap-wires-'+id,'display','block');} else {return false;}}};var bignewsUpdate={old_menu_length:0,update:function(vertical) {var uri='/topnav/'+vertical+'.html';YAHOO.util.Connect.asyncRequest('GET',uri,{success:bignewsUpdate.Success,failure:bignewsUpdate.Fail});},Success:function(o) {if(0==bignewsUpdate.old_menu_length) {$('big_news_update').innerHTML=o.responseText;bignewsUpdate.old_menu_length=o.responseText.length;} else {if(bignewsUpdate.old_menu_length!==o.responseText.length) {bignewsUpdate.old_menu_length=o.responseText.length;var bignews_div=document.getElementById("big_news_update");var bg_color='#fff';if(null!=$('topnav_big_news_module')) bg_color=$('topnav_big_news_module').style.backgroundColor;if(bignews_div){anim=new YAHOO.util.ColorAnim(bignews_div,{backgroundColor:{from:'#F9E801',to:bg_color},opacity:{from:0.7,to:1}},1.5) anim.animate();anim=null;} $('big_news_update').innerHTML=o.responseText;}}},Fail:function(o) {return;}};StructuredImage=Class.create();StructuredImage.prototype={initialize:function(Tag){if(!(decon=//.exec(Tag))) return false;this.keywords=decon[2];this.id=decon[3];this.domain=(decon[1])?'dev.assets.huffingtonpost.com':'images.huffingtonpost.com';this.path="http://"+this.domain+"/gen/"+this.id+"/thumbs/";},Url:function(aspect,size){return this.path+aspect+"-"+this.keywords+"-"+size+".jpg";}} var FanSystem={linkClass:'becomefan_link',becomeIdPrefix:'becomefan',updatedIdPrefix:'becomefanupdated',notificationsSaveInner:'
Your notifications preferences are saved
',becomeFan:function(of){if(!of)return true;FanSystem.fanof_username=of.replace(/_/g," ");var fr=YAHOO.util.Connect.asyncRequest('GET','/users/becomeFan.php?of='+of+'&ajax=1',this);return false;},success:function(o){if(o.responseText=='')return false;splits=o.responseText.split(':::');if(splits[0]=='updated'){userid=splits[1];if(!userid)return false;SNProject.track(userid,'user_follow');FanSystem.notificationsPop();return this.updateLinks(userid);}else if(splits[0]=='login'){QuickLogin.pop();}},failure:function(o){HPError.e('Sorry, unable to process your request');},timeout:5000,updateLinks:function(userid){links=D.getElementsByClassName(this.linkClass,'a');if(!links.length)return false;for(var i=0,len=links.length;i]*>/.test(o.responseText)){var modal_params={width:595,social_logo:false};QuickSNProject.showModal(o.responseText,modal_params);$('email_alerts_preferences_form').onsubmit=FanSystem.notificationsSave;}}});},notificationsSave:function(){$('btn_save_preferences_centered').innerHTML='';C.setForm($('email_alerts_preferences_form'));C.asyncRequest('POST','/users/notifications/index.php?quicksave=1',{success:function(o){$('huff_snn_modal_common_inner').innerHTML=FanSystem.notificationsSaveInner;setTimeout(function(){Modal.hideMask();},2000);},failure:function(o){Modal.hideMask();},timeout:5000});return false;},onNotificationsPopFilter:function(filter){var appendFilteredResult=function(text,divWidth){var el=document.createElement('DIV');el.style.styleFloat='left';el.style.cssFloat='left';if(typeof(divWidth)!='undefined')el.style.width=divWidth+'px';el.style.border='none';el.style.padding='0';el.innerHTML=text;$('fanof_column_filtered').appendChild(el);} $('fanof_column_filtered').innerHTML='';if(filter==''){$('fanof_column_filtered').style.display='none';$('fanof_column0').style.display='block';$('fanof_column1').style.display='block';$('fanof_column2').style.display='block';return;} $('fanof_column0').style.display='none';$('fanof_column1').style.display='none';$('fanof_column2').style.display='none';filter='fanof_'+filter.replace(' ','_').toLowerCase();var cols={col0:$('fanof_column0'),col1:$('fanof_column1'),col2:$('fanof_column2')};for(var i in cols){els=cols[i].childNodes;for(var j=0;j');iframe.doc.write("a{color: #000000; display:none;}");iframe.doc.write("a:visited {color: #FF0000; display:inline;}");iframe.doc.write('');iframe.doc.close();return iframe;} function chart_showImage(img_type,elem_id){url="http://markets.on.nytimes.com/research/tools/builder/api.asp?sym=$"+ img_type+ "&duration=1&chartstyle=Home&w=337&h=255&display=lineclip";img_elem=document.getElementById(elem_id);img_elem.src=url;} var prev_anchor=false;load_blogrolls=function(vertical,div_elem){if(prev_anchor){D.replaceClass(prev_anchor,"blogroll_tab_anchor","blogroll_tab_anchor_visited");} if(vertical!="home"){var anchor=document.getElementById("blogroll_tab_"+vertical);D.replaceClass(anchor,"blogroll_tab_anchor_visited","blogroll_tab_anchor");prev_anchor="blogroll_tab_"+vertical;} div_elem=div_elem||"blogroll";cb_onSuccess=function(o){var html_text=o.responseText;var elem=o.argument;var div_to_mod=document.getElementById(elem);var elements=D.getElementsByClassName("link_list_wrapper","div");for(i=0;i=this.clicks)) {var spn=this.make_element('span',{id:'new_digg_story',className:'right_now_yahoo'});spn.innerHTML=" Be the First to Submit
This Story to Digg";this.parent_elem.appendChild(spn);document.write("