//////////////////////////////////////////////////////////////////////////////
// CommunityWidget is called by the CommunityWidgetManager
// it contains a static method CommunityWidget.createWidget() that first builds the div skeleton for the widget
// then the CommunityWidgetManager casts the div tree as a CommunityWidget, which initializes its buttons and events and loads the widget's iframe content
//////////////////////////////////////////////////////////////////////////////

function CommunityWidget(id, widgetConfig) {
	
	// elementId stores the id of the widget div element in the DOM as a string
	this.elementId = id;
	// element is a reference to the actual div object in the DOM
	this.element = YAHOO.util.Dom.get(this.elementId);
	
	// create a circular reference from the element to widget so the element knows which widget it has
	// this is used when the widget mgr iterates through the column elements to save widget positioning
	this.element.widget = this;
	// destroy the circular reference on page unload to prevent memory leaks
	YAHOO.util.Event.addListener(document.body, 'unload', function() {
			this.element.widget = null; 
		}, this, true);
	
	// make config variables more accessible
	this.userId = widgetConfig.userId;
	this.userName = widgetConfig.userName;
	this.userProfileWidgetId = widgetConfig.userProfileWidgetId;
	
	// widgetId is the widget's native ID in the database. 'widget_' + widgetId is the elementId
	this.widgetId = widgetConfig.widgetId;
	this.widgetType = widgetConfig.widgetType;
	this.widgetUrl = widgetConfig.widgetUrl;
	this.widgetTitle = widgetConfig.widgetTitle;
	this.viewType = widgetConfig.viewType;
	this.widgetState = widgetConfig.widgetState;
	this.urlSafeTitle = widgetConfig.urlSafeTitle;
	this.widgetRow = widgetConfig.widgetRow;
	this.widgetColumn = widgetConfig.widgetColumn;
	this.sponsorAd = widgetConfig.sponsorAd;
	
	// in order to enable drag & drop functionality, create a 'draggable' property and assign to it an instance of CommunityWidgetDragDrop
	if (this.viewType == 'private') {
		this.draggable = new CommunityWidgetDragDrop(this.elementId, '', { widgetId: this.widgetId });
	}
	
	// initialize the widget parts we need to access
	this.innerWrapperEl = YAHOO.util.Dom.get(this.widgetId + '_innerWrapper');
	this.contentEl = YAHOO.util.Dom.get(this.widgetId + '_content');
	this.handleEl = YAHOO.util.Dom.get(this.widgetId + '_handle');
	this.toggleLink = YAHOO.util.Dom.get(this.widgetId + '_toggle');
	this.titleEl = YAHOO.util.Dom.get(this.widgetId + '_title');
	this.contentBoxTopEl = YAHOO.util.Dom.get(this.widgetId + '_contentBoxTop');
	this.contentBoxTopMidEl = YAHOO.util.Dom.get(this.widgetId + '_contentBoxTopMid');
	this.contentBoxTopMidInnerEl = YAHOO.util.Dom.get(this.widgetId + '_contentBoxTopMidInner');
	this.contentBoxTopDividerEl = YAHOO.util.Dom.get(this.widgetId + '_contentBoxTopDivider');
	this.contentBoxMidEl = YAHOO.util.Dom.get(this.widgetId + '_contentBoxMid');
	this.contentFreeEl = YAHOO.util.Dom.get(this.widgetId + '_contentfree');
	
	try {
		this.addMssg = YAHOO.util.Dom.get(this.widgetId + '_addMssg');
		this.addMssgHref = YAHOO.util.Dom.get(this.widgetId + '_addMssgHref');
		this.addLink = YAHOO.util.Dom.get(this.widgetId + '_add');
	} catch(e) {}
	
	try {
		this.removeMssg = YAHOO.util.Dom.get(this.widgetId + '_removeMssg');
		this.removeMssgHref = YAHOO.util.Dom.get(this.widgetId + '_removeMssgHref');
		this.removeLink = YAHOO.util.Dom.get(this.widgetId + '_remove');
	} catch(e) {}
	
	// dialog bubble for add/remove notifications
	this.bubbleAdd = YAHOO.util.Dom.get('dialog_bubble_add');
	this.bubbleRemove = YAHOO.util.Dom.get('dialog_bubble_remove');
	this.bubbleCloseBtn = YAHOO.util.Dom.get('dialog_close');
	this.bubbleCancelBtn = YAHOO.util.Dom.get('dialog_cancel');
	this.bubbleConfirmRemovalBtn = YAHOO.util.Dom.get('dialog_remove');
	
	// default form text for textareas (used in widgets)
	this.defaultFormText = YAHOO.util.Dom.get('txtDefaultFormText').value;
	
	// initialize content toggle link
	YAHOO.util.Event.addListener(this.toggleLink, 'click', this.toggleContent, this, true);
	
	if (this.widgetState == 'collapsed') {
		this.collapseContent();
	}
	
	// initialize add/remove link
	if (this.addMssg) {
		this.setAddEvents();
	}
	if (this.removeMssg) {
		this.setRemoveEvents();
	}
	
	this.loadIframe()
	this.iframe = YAHOO.util.Dom.get(this.widgetId + '_iframe');
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.toggleContent() 
// toggles the content display (visible/hidden)
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.toggleContent = function() {
	
	if (this.widgetState == 'expanded' ) {
		YAHOO.util.Dom.addClass(this.contentEl, 'ie7_offset');
		var attributes = {
			height: { to: 0 }
		};
		this.widgetState = 'collapsed';
	} else {
		// display content before the animation begins
		YAHOO.util.Dom.removeClass(this.contentEl, 'ie7_offset');
		YAHOO.util.Dom.setStyle(this.contentEl, 'visibility', 'visible');
		var attributes = {
			height: { to: this.expandedHeight }
		};
		this.widgetState = 'expanded';
	}
	
	// create a Yahoo animation to animate the expand/collapse
	var anim = new YAHOO.util.Anim(this.contentEl, attributes, .15, YAHOO.util.Easing.easeIn);
	var tempObj = this;
	anim.onComplete.subscribe(function() {
		if (tempObj.widgetState == 'expanded') {
			// remove 'collapsed' class, which swaps the toggle image
			YAHOO.util.Dom.removeClass(tempObj.toggleLink, 'collapsed');
			// once expanded, reset the height to 'auto' to allow for content growth
			YAHOO.util.Dom.setStyle(tempObj.contentEl, 'height', 'auto');
		} else {
			// add 'collapsed' class, which swaps the toggle image
			YAHOO.util.Dom.addClass(tempObj.toggleLink, 'collapsed');
			// hide content - otherwise the iframe shows while dragging
			YAHOO.util.Dom.setStyle(tempObj.contentEl, 'visibility', 'hidden');
		}
		// adjust column heights
		myWidgetMgr.adjustColumnHeights();
	});
	anim.animate();
	
	// save widgetState if user is looking at their own profile
	if (this.viewType == 'private') {
		WidgetLibraryService.updateWidgetState(this.widgetId, this.userId, this.widgetState)
	}
	
	// re-adjust widget column heights (so that the footer isn't left floating way down on the page)
	myWidgetMgr.adjustColumnHeights();
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.collapseContent()
// collapses the content without animation (for setting widget state on page load)
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.collapseContent = function() {
	
	YAHOO.util.Dom.setStyle(this.contentEl, 'height', '0');
	YAHOO.util.Dom.setStyle(this.contentEl, 'visibility', 'hidden');
	YAHOO.util.Dom.addClass(this.contentEl, 'ie7_offset'); //the ie7_offset class compensates for the 3px space that only occurs in IE7
	YAHOO.util.Dom.addClass(this.toggleLink, 'collapsed');
	this.widgetState = 'collapsed';
	
}

/*///////////////////////////////////////////////////////////////////
// CommunityWidget.getExpandedHeight()
// computes the pixel height of the widget (used for expanding collapsed widget back to its original height)
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.getExpandedHeight = function() {
	
	// style.height in IE returns 'auto' instead of a pixel value
	this.expandedHeight = this.contentEl.offsetHeight;
	
	// compute widget height based on XY coordinates of widget div and next sibling
	var nextEl = this.element.nextSibling;
	// cycle through siblings until you get an element node (not spaces, line breaks, etc.)
	while (nextEl.nodeType > 1) {
		nextEl = nextEl.nextSibling;
	}
	var top = YAHOO.util.Dom.getY(this.element);
	var bottom = YAHOO.util.Dom.getY(nextEl);
	
	this.expandedHeight = bottom - top - 50;
	
}*/

///////////////////////////////////////////////////////////////////
// CommunityWidget.setAddEvents()
// sets the 'add to profile' button events
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.setAddEvents = function() {
	
	var tempObj = this;
	
	if (loggedInUserId > 0) {
		YAHOO.util.Event.addListener(this.addLink, 'click', this.addWidget, this, true);
		YAHOO.util.Event.addListener(this.addMssgHref, 'click', this.addWidget, this, true);
	} else {
		// have to cast these explicitly rather than just assigning the className, because they may not exist in the DOM yet when the login_popup crawls the page
		new LoginBoxTrigger(this.addLink);
		new LoginBoxTrigger(this.addMssgHref);
	}
	
	YAHOO.util.Event.addListener(this.addLink.id, 'mouseover', function() {
			clearTimeout(this.addBtnMouseout);
			var attributes = { width: { to: 80 } };
			this.animExpandMssg = new YAHOO.util.Anim(this.addMssg, attributes, .25, YAHOO.util.Easing.easeIn);
			this.addBtnMouseover = setTimeout(function() {
				tempObj.animExpandMssg.onComplete.subscribe(function() {
					YAHOO.util.Dom.addClass(tempObj.addMssg, 'add_mssg_on');
				});
				tempObj.animExpandMssg.animate();
			  }, 100);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.addLink.id, 'mouseout', function() {
			this.animExpandMssg.stop(false);
			clearTimeout(this.addBtnMouseover);
			this.addBtnMouseout = setTimeout(function() {
				YAHOO.util.Dom.removeClass(tempObj.addMssg, 'add_mssg_on');
				var attributes = { width: { to: 0 } };
				var animCollapseMssg = new YAHOO.util.Anim(tempObj.addMssg, attributes, .15, YAHOO.util.Easing.easeIn);
				animCollapseMssg.animate();
			  }, 200);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.addMssg.id, 'mouseover', function() {
			clearTimeout(this.addBtnMouseout);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.addMssg.id, 'mouseout', function() {
			this.animExpandMssg.stop(false);
			clearTimeout(this.addBtnMouseover);
			this.addBtnMouseout = setTimeout(function() {
				YAHOO.util.Dom.removeClass(tempObj.addMssg, 'add_mssg_on');
				var attributes = { width: { to: 0 } };
				var animCollapseMssg = new YAHOO.util.Anim(tempObj.addMssg, attributes, .15, YAHOO.util.Easing.easeIn);
				animCollapseMssg.animate();
			  }, 200);
		}, this, true);
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.addWidget()
// adds the widget to the user's profile
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.addWidget = function() {
	
	if (loggedInUserId) {
		
		// add widget to user's profile
		WidgetLibraryService.addWidgetToProfile(this.widgetId, loggedInUserId);
	
		// offsets for dialog bubble
		this.BubbleOffsetX = 65;
		this.BubbleOffsetY = -85;
		if (BrowserDetect.browser == 'Explorer') {
			this.BtnOffsetY += 0;
		}
		
		// get widget position for dialog bubble
		this.getWidgetPosition();
		this.BubblePosX = this.posX + this.BubbleOffsetX;
		this.BubblePosY = this.posY + this.BubbleOffsetY;
		
		// show confirmation dialog bubble
		YAHOO.util.Dom.setXY(this.bubbleAdd,[this.BubblePosX,this.BubblePosY]);
		YAHOO.util.Dom.setStyle(this.bubbleAdd, 'visibility', 'visible');
		
		// remove any previous event listeners since this bubble is used by all the widgets
		YAHOO.util.Event.removeListener(this.bubbleCloseBtn, 'click');
		
		// add close button listener
		YAHOO.util.Event.addListener(this.bubbleCloseBtn, 'click', function(){
				YAHOO.util.Dom.setStyle(this.bubbleAdd, 'visibility', 'hidden');
			}, this, true);
		
	}
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.setRemoveEvents()
// sets the 'remove from profile' button events
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.setRemoveEvents = function() {
	
	var tempObj = this;
	
	YAHOO.util.Event.addListener(this.removeLink, 'click', this.removeWidget, this, true);
	YAHOO.util.Event.addListener(this.removeMssgHref, 'click', this.removeWidget, this, true);
	
	YAHOO.util.Event.addListener(this.removeLink.id, 'mouseover', function() {
			clearTimeout(this.removeBtnMouseout);
			var attributes = { width: { to: 115 } };
			this.animExpandMssg = new YAHOO.util.Anim(this.removeMssg, attributes, .25, YAHOO.util.Easing.easeIn);
			this.removeBtnMouseover = setTimeout(function() {
				tempObj.animExpandMssg.onComplete.subscribe(function() {
					YAHOO.util.Dom.addClass(tempObj.removeMssg, 'remove_mssg_on');
				});
				tempObj.animExpandMssg.animate();
			  }, 100);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.removeLink.id, 'mouseout', function() {
			this.animExpandMssg.stop(false);
			clearTimeout(this.removeBtnMouseover);
			this.removeBtnMouseout = setTimeout(function() {
				YAHOO.util.Dom.removeClass(tempObj.removeMssg, 'remove_mssg_on');
				var attributes = { width: { to: 0 } };
				var animCollapseMssg = new YAHOO.util.Anim(tempObj.removeMssg, attributes, .15, YAHOO.util.Easing.easeIn);
				animCollapseMssg.animate();
			  }, 200);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.removeMssg.id, 'mouseover', function() {
			clearTimeout(this.removeBtnMouseout);
		}, this, true);
	
	YAHOO.util.Event.addListener(this.removeMssg.id, 'mouseout', function() {
			this.animExpandMssg.stop(false);
			clearTimeout(this.removeBtnMouseover);
			this.removeBtnMouseout = setTimeout(function() {
				YAHOO.util.Dom.removeClass(tempObj.removeMssg, 'remove_mssg_on');
				var attributes = { width: { to: 0 } };
				var animCollapseMssg = new YAHOO.util.Anim(tempObj.removeMssg, attributes, .15, YAHOO.util.Easing.easeIn);
				animCollapseMssg.animate();
			  }, 200);
		}, this, true);
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.removeWidget()
// removes the widget from the user's profile
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.removeWidget = function() {
	
	if (loggedInUserId) {
	
		// offsets for dialog bubble
		this.BubbleOffsetX = 65;
		this.BubbleOffsetY = -104;
		if (BrowserDetect.browser == 'Explorer') {
			this.BubbleOffsetY += -4;
		}
		
		// get widget position for dialog bubble
		this.getWidgetPosition();
		this.BubblePosX = this.posX + this.BubbleOffsetX;
		this.BubblePosY = this.posY + this.BubbleOffsetY;
		
		// show confirmation dialog bubble
		YAHOO.util.Dom.setXY(this.bubbleRemove,[this.BubblePosX,this.BubblePosY]);
		YAHOO.util.Dom.setStyle(this.bubbleRemove, 'visibility', 'visible');
		
		// remove any previous event listeners since this bubble is used by all the widgets
		YAHOO.util.Event.removeListener(this.bubbleCloseBtn, 'click');
		YAHOO.util.Event.removeListener(this.bubbleConfirmRemovalBtn, 'click');
		
		// add cancel button listener
		YAHOO.util.Event.addListener(this.bubbleCancelBtn, 'click', function(){
				YAHOO.util.Dom.setStyle(this.bubbleRemove, 'visibility', 'hidden');
			}, this, true);
		
		// add 'confirm remove' button listener
		YAHOO.util.Event.addListener(this.bubbleConfirmRemovalBtn, 'click', function(){
				// remove widget from user's profile
				WidgetLibraryService.removeWidgetFromUserProfile(this.widgetId, loggedInUserId);
				YAHOO.util.Dom.setStyle(this.bubbleRemove, 'visibility', 'hidden');
				YAHOO.util.Dom.setStyle(this.elementId, "display", "none");
				myWidgetMgr.adjustColumnHeights();
			}, this, true);
		
	}
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.getWidgetPosition() 
// gets the X & Y coordinates of the widget and saves them to properties
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.getWidgetPosition = function() {
	
	this.posX = YAHOO.util.Dom.getX(this.element);
	this.posY = YAHOO.util.Dom.getY(this.element);
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.loadIframe()
// creates the iframe and loads it into the widget
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.loadIframe = function() {
	
	this.iframeId = this.widgetId + '_iframe';
	
	this.contentBoxMidEl.innerHTML = '<iframe id="' + this.iframeId + '" name="' + this.iframeId + '" src="' + this.widgetUrl + '?wid=' + this.widgetId + '" width="306" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>';
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.resizeIframe()
// resizes the widget's iframe to the pixel height of the actual iframe document
///////////////////////////////////////////////////////////////////
CommunityWidget.prototype.resizeIframe = function() {
	
	this.iframe = YAHOO.util.Dom.get(this.iframeId);
	var endEl; // get the last element in the iframe to calculate its rendered height
	
	if (this.iframe.contentDocument) { //FF
		this.iframeBody = this.iframe.contentDocument.getElementById('iframe_body');
		endEl = this.iframe.contentDocument.getElementById('endEl');
	} else if (this.iframe.document) { //IE
		// the only way that IE seems to be able to access the iframe is by iterating through and matching by name
		// accessing the frame directly by name or id does not work in IE6 or 7, inexplicably
		for (var i=0; i<top.frames.length; i++) {
			// place in a try/catch so that one bad iframe doesn't spoil the bunch
			try {
				if (top.frames[i].name == this.iframeId) {
					this.iframeBody = top.frames[i].document.getElementById('iframe_body');
					endEl = top.frames[i].document.getElementById('endEl');
				}
			} catch(e) {}
		}
	}

	// set height of iframe to Y coordinate of endEl
	this.iframe.height = YAHOO.util.Dom.getY(endEl);
	myWidgetMgr.adjustColumnHeights();
	
	// set the 'expanded height' of the widget - this is used for expanding collapsed widgets
	this.expandedHeight = this.contentEl.offsetHeight;
	
	// gets the widget's X & Y coordinates
	this.getWidgetPosition();
	
}

///////////////////////////////////////////////////////////////////
// CommunityWidget.createWidget()
// static method - creates the widget div tree and prepares it for insertion into the DOM
///////////////////////////////////////////////////////////////////
CommunityWidget.createWidget = function(widgetConfig) {

	var widgetId = widgetConfig.widgetId;
	var widgetType = widgetConfig.widgetType;
	var viewType = widgetConfig.viewType;
	var widgetTitle = widgetConfig.widgetTitle;
	
	var widgetEl = document.createElement('div');
	widgetEl.setAttribute('id','widget_' + widgetId);
	widgetEl.setAttribute('class','w_container');
	
	var innerWrapper = document.createElement('div');
	innerWrapper.setAttribute('id',widgetId + '_innerWrapper');
	innerWrapper.setAttribute('class','innerWrapper');
	
	var handle = document.createElement('div');
	handle.setAttribute('id',widgetId + '_handle');
	if (viewType == 'private') {
		handle.setAttribute('class','w_top movecursor');
	} else {
		handle.setAttribute('class','w_top');
	}
	
	var titlebar = document.createElement('div');
	titlebar.setAttribute('class','titlebar clearfix');
	
	//only create add or remove buttons if widget is not static
	if (!widgetConfig.static) {
		if (viewType == 'private') {
			//create 'remove from profile' btn
			var removeMssg = document.createElement('div');
			removeMssg.setAttribute('id',widgetId + '_removeMssg');
			removeMssg.setAttribute('class','remove_mssg');
			var removeMssgHref = document.createElement('a');
			removeMssgHref.setAttribute('id',widgetId + '_removeMssgHref');
			removeMssgHref.setAttribute('href','javascript:void(0);');
			removeMssgHref.innerHTML = 'Remove from profile';
			removeMssg.appendChild(removeMssgHref);
			titlebar.appendChild(removeMssg);
			var removeLink = document.createElement('div');
			removeLink.setAttribute('id',widgetId + '_remove');
			removeLink.setAttribute('class','remove');
			titlebar.appendChild(removeLink);
		} else if (viewType == 'public') {
			//create 'add to profile' btn
			var addMssg = document.createElement('div');
			addMssg.setAttribute('id',widgetId + '_addMssg');
			addMssg.setAttribute('class','add_mssg');
			var addMssgHref = document.createElement('a');
			addMssgHref.setAttribute('id',widgetId + '_addMssgHref');
			addMssgHref.setAttribute('href','javascript:void(0);');
			addMssgHref.innerHTML = 'Add to profile';
			addMssg.appendChild(addMssgHref);
			titlebar.appendChild(addMssg);
			var addLink = document.createElement('div');
			addLink.setAttribute('id',widgetId + '_add');
			addLink.setAttribute('class','add');
			titlebar.appendChild(addLink);
		}
	}
	
	var toggle = document.createElement('div');
	toggle.setAttribute('class','btn_left');
	var toggleLink = document.createElement('a');
	toggleLink.setAttribute('id',widgetId + '_toggle');
	toggleLink.setAttribute('class','toggle');
	toggleLink.setAttribute('href','javascript:void(0);');
	toggle.appendChild(toggleLink);
	titlebar.appendChild(toggle);
	
	var title = document.createElement('div');
	title.setAttribute('id',widgetId + '_title');
	title.setAttribute('class','w_title');
	title.innerHTML = '<h2>' +widgetTitle + '</h2>';
	titlebar.appendChild(title);
	
	handle.appendChild(titlebar);
	innerWrapper.appendChild(handle);
	
	var content = document.createElement('div');
	content.setAttribute('id',widgetId + '_content');
	content.setAttribute('class','w_mid');
	
	var contentInner = document.createElement('div');
	contentInner.setAttribute('id',widgetId + '_contentInner');
	contentInner.setAttribute('class','w_content');
	
	var contentBoxTop = document.createElement('div');
	contentBoxTop.setAttribute('id',widgetId + '_contentBoxTop');
	contentBoxTop.setAttribute('class','w_content_box_top');
	contentInner.appendChild(contentBoxTop);
	
	// contentBoxTopMidInner is where the blogwidget promo content goes
	var contentBoxTopMid = document.createElement('div');
	contentBoxTopMid.setAttribute('id',widgetId + '_contentBoxTopMid');
	contentBoxTopMid.setAttribute('class','w_content_box_mid hide');
	var contentBoxTopMidInner = document.createElement('div');
	contentBoxTopMidInner.setAttribute('id',widgetId + '_contentBoxTopMidInner');
	contentBoxTopMidInner.setAttribute('class','w_content_box_mid_innerContainer clearfix');
	// contentBoxTopMidInner is positioned relative for IE6
	contentBoxTopMid.appendChild(contentBoxTopMidInner);
	contentInner.appendChild(contentBoxTopMid);
	
	var contentBoxTopDivider = document.createElement('div');
	contentBoxTopDivider.setAttribute('id',widgetId + '_contentBoxTopDivider');
	contentBoxTopDivider.setAttribute('class','w_content_box_div hide');
	contentBoxTopDivider.innerHTML = '<img src="/images/community/1x1.gif" width="1" height="1" />'; //for IE6
	contentInner.appendChild(contentBoxTopDivider);
	
	var contentBoxMid = document.createElement('div');
	contentBoxMid.setAttribute('class','w_content_box_mid');
	var contentBoxMidInner = document.createElement('div');
	contentBoxMidInner.setAttribute('id',widgetId + '_contentBoxMid');
	contentBoxMidInner.setAttribute('class','w_content_box_mid_innerContainer');
	// all widget content will go in here
	contentBoxMid.appendChild(contentBoxMidInner);
	contentInner.appendChild(contentBoxMid);
	
	var contentBoxBottom = document.createElement('div');
	contentBoxBottom.setAttribute('class','w_content_box_bot');
	contentInner.appendChild(contentBoxBottom);
	
	var contentFree = document.createElement('div');
	contentFree.setAttribute('id',widgetId + '_contentfree');
	contentFree.setAttribute('class','w_content_free clearfix hide');
	contentInner.appendChild(contentFree);
	
	content.appendChild(contentInner);
	innerWrapper.appendChild(content);
	
	var bottom = document.createElement('div');
	bottom.setAttribute('class','w_bot');
	innerWrapper.appendChild(bottom);
	
	widgetEl.appendChild(innerWrapper);
	
	return widgetEl;
	
}

/* This is an example of what the createWidget function outputs:

<div id="widget_ID" class="w_container">
  <div id="widget_ID_innerWrapper" class="innerWrapper">
    <div id="widget_ID_handle" class="w_top">
      <div class="titlebar clearfix">
        <div id="widget_ID_addMssg" class="add_mssg"><a id="widget_ID_addMssgHref" href="javascript:void(0);">Add to profile</a></div>
        <a id="widget_ID_add" class="add"></a>
        <div id="_removeMssg" class="remove_mssg"><a id="widget_ID_removeMssgHref" href="javascript:void(0);">Remove from profile</a></div>
        <a id="widget_ID_remove" class="remove"></a>
        <div class="btn_left"><a id="_toggle" class="toggle"></a></div>
        <div id="widget_ID_title" class="w_title"></div>
      </div>
    </div>
    <div id="widget_ID_content" class="w_mid">
      <div class="w_content">
        <div class="w_content_box_top"></div>
		<div class="w_content_box_div"></div>
        <div id="widget_ID_contentbox" class="w_content_box_mid">
          <div id="318_contentBoxMid" class="w_content_box_mid_innerContainer">
			<!-- this is where the iframe will go -->
		  </div>
        </div>
        <div class="w_content_box_bot"></div>
        <div id="widget_ID_contentfree" class="w_content_free clearfix"></div>
      </div>
    </div>
    <div class="w_bot"></div>
  </div>
</div>

*/