var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

function showAbout(what,when,who,where,howmany)
{

	var pcnf = document.getElementById('pcnf')
	if(!pcnf)
	{
	
		when = new Date(when)
		var ourdiv = document.createElement('div')
		ourdiv.style.display='none'
		ourdiv.id = 'pcnf'
		ourdiv.className = 'pcdsc'
		var title = document.createElement('h1')
		title.innerHTML = '“'+((what=='null'||what==null||what=='')?'Untitled':unescape(what))+'”'
		ourdiv.appendChild(title)
		
		var ppldr = document.createElement('div')
		ppldr.innerHTML = 'Uploaded by ' + who
		if(where)
		{
			ppldr.innerHTML += ' to ' + where
		} else {
			ppldr.innerHTML += ' at '
		}
		ourdiv.appendChild(ppldr)
		
		var datestring = when.getHours() + ':' + padMin(when.getMinutes()) + ', ' + when.getDate() + ' ' + months[when.getMonth()] + ' ' + when.getFullYear()
		if(where)
		{
		var pdate = document.createElement('div')
		pdate.innerHTML = datestring
		ourdiv.appendChild(pdate)
		} else {
			ppldr.innerHTML+=datestring
		}
		
		if(howmany)
		{
			var plink = document.createElement('div')
			plink.innerHTML = '+ CLICK TO VIEW '+howmany+' IMAGES +'
			ourdiv.appendChild(plink)	
		} else {
			var plink = document.createElement('div')
			plink.innerHTML = '+ CLICK FOR OPTIONS +'
			ourdiv.appendChild(plink)			
		}
	
		ourdiv.style.position = 'absolute'	
		
		var gddom = document.getElementById('grid')
		if(gddom)
		{
			gddom.appendChild(ourdiv)
		} else {
			document.body.appendChild(ourdiv)
		}
	}
}

function padMin(min)
{
	if((''+min).length==1)
		return '0'+min
		
	return min
}

function hideAbout()
{
	var pcnf = document.getElementById('pcnf')
	if(pcnf)
	{
		pcnf.parentNode.removeChild(pcnf)
	}
}

function Zoomer()
{

	var fullimg = null
	var target  = null
	var thmbx = 0;
	var thmby = 0;
	var props = 0;
	var is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
	var status = null
	var bdiv = null
	var _gd = null
	var cbine = null
	var _callback = null
	var newscale = { scale: 0, offsetx: 0, offsety: 0 }
	
	function create(obj,mx,my,_grid,callback)
	{

		target = obj
		_gd = _grid
		_callback = callback
		thmbx = target.clientWidth
		thmby = target.clientHeight
	
		var pid = target.id.substring(1)
	
		// load cropdata
		status = new InlineStatus()
		status.start('LOADING ZOOM DATA',mx,my)
		_grid.getDAO().loadJSON('/love/cropdata/'+parseInt(pid,10),expandZoom)
		
	}
	this.create = create
	
	function resize()
	{
		bdiv.style.width = YAHOO.util.Dom.getViewportWidth() + 'px'
		bdiv.style.height = YAHOO.util.Dom.getViewportHeight() + 'px'	
		fullimg.style.left = Math.round(YAHOO.util.Dom.getViewportWidth() / 2 - fullimg.width / 2) - 16 + 'px'
		fullimg.style.top = Math.round(YAHOO.util.Dom.getViewportHeight() / 2 - fullimg.height / 2) - 16 + 'px'	
	}
	
	function expandZoom(jsonresp)
	{

		status.changeMessage('LOADING IMAGE')
		
		//cover viewpoint
		bdiv = document.createElement('div')
		bdiv.style.backgroundColor='#000'
		if(is_ie)
		{
			bdiv.style.filter = 'alpha(opacity=60)'
		} else {
			bdiv.style.opacity = '0.6'
		}
		bdiv.style.left = 0
		bdiv.style.top = 0
		bdiv.style.position = 'absolute'
		bdiv.style.width = YAHOO.util.Dom.getViewportWidth() + 'px'
		bdiv.style.height = YAHOO.util.Dom.getViewportHeight() + 'px'
		bdiv.style.zIndex = 98;
		document.body.appendChild(bdiv)
		
		var scaleParams = jsonresp.parseJSON()
		// width, height, offsetx, offsety, scale
	
		// this needs to come out of back-end
		fullimg = document.createElement('img')
		fullimg.onload=displayZoom
		fullimg.grid = {}
		fullimg.grid.scale = scaleParams.scale
		fullimg.grid.offsetLeft = scaleParams.offsetx
		fullimg.grid.offsetTop  = scaleParams.offsety
		fullimg.src = scaleParams.largeurl
		fullimg.style.cursor = 'pointer'
		
		_gd.registerEventListener('resize',resize)
	
	}

	function displayZoom()
	{
		status.end()	
		var x = Math.round(YAHOO.util.Dom.getViewportWidth() / 2 - fullimg.width / 2) - 16
		var y = Math.round(YAHOO.util.Dom.getViewportHeight() / 2 - fullimg.height / 2) - 16
		fullimg.style.position = 'absolute'
		fullimg.style.zIndex = 99;
		fullimg.style.left = x + 'px'
		fullimg.style.top = y + 'px'
		fullimg.style.border = '16px solid #fff'
		
		fullimg.onclick = destroy
		document.body.appendChild(fullimg)
		
	
	}
	
	function destroy()
	{
	
		_gd.destroyEventListener('resize',resize)
	
		fullimg.parentNode.removeChild(fullimg)
		bdiv.parentNode.removeChild(bdiv)
		fullimg = null
		bdiv = null
		_callback()
	}

}

function Resizer()
{

var fullimg = null
var target  = null
var thmbx = 0;
var thmby = 0;
var props = 0;
var is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
var status = null
var _gd = null
var cbine = null
var _callback = null
var newscale = { scale: 0, offsetx: 0, offsety: 0 }

function create(obj,mx,my,_grid,callback)
{

	target = obj
	_gd = _grid
	_callback = callback
	thmbx = target.clientWidth
	thmby = target.clientHeight
	
	var pid = target.id.substring(1)

	// load cropdata
	status = new InlineStatus()
	status.start('LOADING CROP DATA',mx,my)
	//alert('/love/cropdata/'+parseInt(pid,10))

	_grid.getDAO().loadJSON('/love/cropdata/'+parseInt(pid,10),buildResizer)

}

function buildResizer(jsonresp)
{

	status.changeMessage('LOADING FULL IMAGE')
	
	var scaleParams = jsonresp.parseJSON()
	// width, height, offsetx, offsety, scale

	// this needs to come out of back-end
	fullimg = document.createElement('img')
	fullimg.onload=setupDOM
	fullimg.grid = {}
	fullimg.grid.scale = scaleParams.scale
	fullimg.grid.offsetLeft = scaleParams.offsetx
	fullimg.grid.offsetTop  = scaleParams.offsety
	fullimg.src = '/fullscale/'+target.id.substring(1)
	
	cbine = new CarbineDialog();
	content = '<img src="/img/carbine_header_scalecrop.gif" style="margin-bottom: 6px" /><br/>'
	content += 'Original image dimensions: ' + scaleParams.width + ' x ' + scaleParams.height + '<br/>'
	content += 'Tile Resolution: POOR<br/>'
	content += '(A good resolution is important for print quality)'
	cbine.create(content,save,destroy,_gd)

}
this.create = create

function destroy()
{
	destroyEventHandlers()
	killNode(document.getElementById('handle1'))
	killNode(document.getElementById('handle2'))
	killNode(document.getElementById('handle3'))
	killNode(document.getElementById('handle4'))
	killNode(document.getElementById('outcrop'))
	killNode(document.getElementById('cropper'))
	_callback()
}

function killNode(nd)
{
	nd.parentNode.removeChild(nd)
	nd = null
}

function save()
{


	// _
	var url = '/love/croppicture/'+target.id.substring(1) + '?'
		url += 'scale='+newscale.scale
		url += '&offsetx='+newscale.offsetx
		url += '&offsety='+newscale.offsety
	
	//alert(url)
	
	_gd.getDAO().postJSON(url,handleSave)

	//alert('new scale: ' + newscale.scale + ' offsets: ' + newscale.offsetx + ', ' + newscale.offsety)
	//alert('not implemented')
	//destroy()
}

function handleSave(json)
{
	var resp = json.parseJSON()
	target.src = resp.url
	//alert(target.src)
	destroy()
}

function setupDOM()
{

	status.end()
	//alert('loaded image: ' + fullimg.width + 'x' + fullimg.height)

	width  = fullimg.width
	height = fullimg.height
	props = width/height

	oimg = fullimg.cloneNode(true)
	oimg.style.position = 'absolute'
	oimg.id=''

	var xoffset = 0
	var yoffset = 0


	if(!fullimg.grid)
	{
		// scale smallest side to thumbsize
		if(width < height)
		{
			oimg.style.height = Math.round(thmbx / props) + 'px'
			oimg.style.width = thmbx + 'px'
			yoffset = (height/(width/thmbx) -thmbx) / -2
		} else {
		    oimg.style.width = Math.round(thmbx * props) + 'px'
			oimg.style.height = thmbx + 'px'
			xoffset = (width/(height/thmbx) - thmbx) /- 2
		}
	} else {
		//alert('have fullimg.grid')
		xoffset = -fullimg.grid.offsetLeft * fullimg.grid.scale
		yoffset = -fullimg.grid.offsetTop * fullimg.grid.scale
		oimg.style.width = fullimg.width * fullimg.grid.scale + 'px'
		oimg.style.height = fullimg.height * fullimg.grid.scale + 'px'
	}

	oimg.style.top = yoffset + 'px'
	oimg.style.left = xoffset + 'px'

	var cropdiv = document.createElement('div')
	cropdiv.id='cropper'
	cropdiv.style.width = cropdiv.style.height = '100px'
	cropdiv.style.overflow = 'hidden'
	cropdiv.style.position='absolute'
	cropdiv.style.zIndex = '5'
	cropdiv.style.cursor = 'move'
	cropdiv.style.left = target.offsetLeft + 'px'
	cropdiv.style.top = target.offsetTop + 'px'
	cropdiv.appendChild(oimg)
	cropdiv.onmousedown = function (evt) {
	 moving = true
	 var evt = (is_ie ? event : evt);
    stx = is_ie ? evt.clientX : evt.pageX;
	sty = is_ie ? evt.clientY : evt.pageY;
			    var oc = document.getElementById('outcrop')
        ox = oc.offsetLeft;
        oy = oc.offsetTop
	   return false;
	 }
	
	var outcrop = oimg.cloneNode(true)
	outcrop.id = 'outcrop'
	outcrop.style.position = 'absolute'
	outcrop.style.zIndex = '4'
	outcrop.style.cursor = 'move'	
	outcrop.style.left = xoffset + target.offsetLeft + 'px'
	outcrop.style.top = yoffset + target.offsetTop + 'px'

	if(is_ie)
	{
		outcrop.style.filter = 'alpha(opacity=40)'
	} else {
		outcrop.style.opacity = '0.4'
	}

	outcrop.onmousedown = function (evt) {
	 moving = true
	 var evt = (is_ie ? event : evt);
    stx = is_ie ? evt.clientX : evt.pageX;
	sty = is_ie ? evt.clientY : evt.pageY;
		var oc = document.getElementById('outcrop')
        ox = oc.offsetLeft;
        oy = oc.offsetTop
	   return false;
	 }
	 
	 gdom = _gd.getCanvas()
	 gcntnr = _gd.getContainer()
	
	gdom.appendChild(cropdiv)
    gdom.appendChild(outcrop)
    
    // draw resize handles
    //top left
    
    var handletop    = outcrop.offsetTop - 4
    var handleleft   = outcrop.offsetLeft - 4
    var handleright  = outcrop.offsetLeft + outcrop.clientWidth - 6
    var handlebottom = outcrop.offsetTop + outcrop.clientHeight - 6  
    
    var tlcnr = document.createElement('div')
	tlcnr.style.position = 'absolute'
	tlcnr.style.overflow = 'hidden'
	tlcnr.style.backgroundImage = 'url("/img/handle.gif")'
	tlcnr.style.width = '10px'
	tlcnr.style.height = '10px'
	tlcnr.style.zIndex = '6'
	tlcnr.style.cursor = 'nw-resize'

    tlcnr.style.left= handleleft + 'px'
    tlcnr.style.top = handletop + 'px'
    tlcnr.className='resizehandle'
    tlcnr.onmousedown = function() { handle = 1; return false }
    tlcnr.id='handle1'
    gdom.appendChild(tlcnr)

    // top right
    trcnr = tlcnr.cloneNode(false)
    trcnr.id='handle2'
    trcnr.style.left = handleright + 'px'
    trcnr.style.top  = handletop + 'px'
    trcnr.onmousedown = function() { handle = 2; return false }
    trcnr.style.cursor = 'ne-resize'
    gdom.appendChild(trcnr)
    // bottom left
    trcnr = tlcnr.cloneNode(false)
    trcnr.id='handle3'
    trcnr.style.left = handleleft + 'px'
    trcnr.style.top  = handlebottom + 'px'
    trcnr.onmousedown = function() { handle = 3; return false }
    trcnr.style.cursor = 'sw-resize'
    gdom.appendChild(trcnr)
    
    // bottom right
    trcnr = tlcnr.cloneNode(false)
    trcnr.id='handle4'
    trcnr.style.left = handleright + 'px'
    trcnr.style.top  = handlebottom + 'px'
    trcnr.onmousedown = function() { handle = 4; return false }
    trcnr.style.cursor = 'se-resize'
    gdom.appendChild(trcnr)
    
    addEventHandlers()
} 

function addEventHandlers()
{
	YAHOO.util.Event.addListener(gcntnr,'mouseup',resizerMouseUp)
	YAHOO.util.Event.addListener(gcntnr,'mousemove',resizerMouseMove)
}

function destroyEventHandlers()
{
	YAHOO.util.Event.removeListener(gcntnr,'mouseup',resizerMouseUp)
	YAHOO.util.Event.removeListener(gcntnr,'mousemove',resizerMouseMove)
} 

var handle = 0
var moving = false
var stx = 0
var sty = 0
var ox = 0
var oy = 0

function resizerMouseUp(evt)
{
    handle = 0
    moving = false
}
function resizerMouseMove(evt)
{
		var evt = (is_ie ? event : evt);
		var offx = is_ie ? evt.clientX : evt.pageX;
		var offy = is_ie ? evt.clientY : evt.pageY;
        var guide = document.getElementById('outcrop')
        
		
		// move
		if(moving)
		{
            
            var dx = offx-stx
		    var dy = offy-sty
		    
		    var pc = document.getElementById('cropper').firstChild
		    
		    guide.style.left = ox + dx + 'px'
		    guide.style.top  = oy  + dy + 'px'
		    
            if(guide.offsetLeft > pc.parentNode.offsetLeft)
                guide.style.left = pc.parentNode.offsetLeft + 'px'
                
            if(guide.offsetTop > pc.parentNode.offsetTop)
                guide.style.top = pc.parentNode.offsetTop + 'px'
                
            if(guide.offsetTop + guide.clientHeight < pc.parentNode.offsetTop + pc.parentNode.clientHeight)
                guide.style.top =  pc.parentNode.offsetTop + pc.parentNode.clientHeight - guide.clientHeight + 'px'
                
            if(guide.offsetLeft + guide.clientWidth < pc.parentNode.offsetLeft + pc.parentNode.clientWidth)
                guide.style.left = pc.parentNode.offsetLeft + pc.parentNode.clientWidth - guide.clientWidth + 'px'
		    
		    //alert(guide.offsetLeft + ' - ' + pc.parentNode.offsetLeft)
		    
		    pc.style.left = guide.offsetLeft - pc.parentNode.offsetLeft + 'px'
		    pc.style.top  = guide.offsetTop - pc.parentNode.offsetTop + 'px'
		    
		    if(newscale.scale == 0)
		    	newscale.scale = guide.clientWidth / fullimg.width 
		    newscale.offsetx = Math.round((pc.parentNode.offsetLeft - guide.offsetLeft) / newscale.scale)
            newscale.offsety = Math.round((pc.parentNode.offsetTop  - guide.offsetTop) / newscale.scale)
		    
		    //stx=offx
		    //sty=offx   
		
		}
		
        // resize: top-left handle
        if(handle)
        {
        
        	offx -= _gd.getOffsetX()
        	offy -= _gd.getOffsetY()
        
            var newwidth = 0
            var newheight = 0
            
            if(handle == 1 || handle == 3)
            {
                newwidth = (guide.offsetLeft + guide.clientWidth) - offx
            } else {
                newwidth = offx - guide.offsetLeft
            }
            
            if(handle == 1 || handle == 2)
            {
                newheight = (guide.offsetTop + guide.clientHeight) - offy
            } else {
                newheight = offy - guide.offsetTop
            }
            
            //handle1 anchor bottom right
            //handle2 anchor bottom left
            //handle3 anchor top right
            //handle4 anchor top left
            var tlx = guide.offsetLeft
            var tly = guide.offsetTop
            
            // use smaller dimension for sanity
            if( newwidth/newheight > guide.clientWidth/guide.clientHeight)
            {
                newwidth = Math.round(newheight * props)
            } else {
                newheight = Math.round(newwidth / props)
            }
            
            // left moves for handle 1 & 3
            if(handle == 1 || handle == 3)
            {
                var oldright = guide.clientWidth + guide.offsetLeft
                tlx = oldright - newwidth
            }
            
            // top moves for 1 & 2
            if(handle == 1 || handle == 2)
            {
                var oldbottom = guide.clientHeight + guide.offsetTop
                tly = oldbottom - newheight
            }
            
            
            // now we constrain numbers to keep over box
            var cropper = document.getElementById('cropper')
            if( tlx > cropper.offsetLeft )
            {
                tlx = cropper.offsetLeft
                newwidth  = guide.offsetLeft + guide.clientWidth - tlx
                newheight = Math.round(newwidth / props)
                
                if(handle==1)
                    tly = oldbottom - newheight
            }
            
            if( tlx + newwidth < cropper.offsetLeft + cropper.clientWidth)
            {
                newwidth = cropper.clientWidth + (cropper.offsetLeft - tlx)
                newheight = Math.round(newwidth / props)
                
                if(handle == 2)
                    tly = oldbottom - newheight
            }
            
            if( tly > cropper.offsetTop)
            {
                tly = cropper.offsetTop
                newheight = guide.offsetTop + guide.clientHeight - tly
                newwidth = Math.round(newheight * props)
                if(handle == 1)
                    tlx = oldright - newwidth
            }
            
            if( tly + newheight <= cropper.offsetTop + cropper.clientHeight )
            {
                newheight = cropper.clientHeight + cropper.offsetTop - tly
                newwidth = Math.round(newheight * props)
                if(handle == 3)
                    tlx = oldright - newwidth
            }            
            
            
            guide.style.top    = tly + 'px'
            guide.style.left   = tlx + 'px'
            guide.style.width  = newwidth + 'px'
            guide.style.height = newheight + 'px'
            
            // update inner pic
            var innerpic = document.getElementById('cropper').firstChild
            innerpic.style.width      = newwidth + 'px'
            innerpic.style.height     = Math.round(newwidth / props ) + 'px'
            innerpic.style.left = guide.offsetLeft - innerpic.parentNode.offsetLeft + 'px'
            innerpic.style.top  = guide.offsetTop - innerpic.parentNode.offsetTop + 'px'
            
            // new scale data
            newscale.scale   = newwidth / fullimg.width 
            newscale.offsetx = Math.round((cropper.offsetLeft - tlx) / newscale.scale)
            newscale.offsety = Math.round((cropper.offsetTop  - tly) / newscale.scale)
            
        }
        
        // reposition handles
        if(handle || moving)
        {
            var handletop    = guide.offsetTop - 4
            var handleleft   = guide.offsetLeft - 4
            var handleright  = guide.offsetLeft + guide.clientWidth - 6
            var handlebottom = guide.offsetTop + guide.clientHeight - 6
            var hdom = document.getElementById('handle1')
            hdom.style.left = handleleft + 'px'
            hdom.style.top  = handletop + 'px'
            
            hdom=document.getElementById('handle2')
            hdom.style.top = handletop + 'px'
            hdom.style.left = handleright + 'px'
            hdom=document.getElementById('handle3')
            hdom.style.top = handlebottom + 'px'
            hdom.style.left = handleleft + 'px'
            
            hdom=document.getElementById('handle4')
            hdom.style.top = handlebottom + 'px'
            hdom.style.left = handleright + 'px'            
            
        }

        return false

	}

}


function InlineStatus()
{

	var mydom = document.createElement('div')
	mydom.id = 'inprog'
	var idleint = 0
	var bgidlexpos = 0
	
	this.start = function(msg,x,y)
	{
		mydom.innerHTML = '<div id="inprogcntnr"><div id="inprogidler"></div></div><div id="inprogmsg">'+msg+'</div></div>'
		mydom.style.left = x+'px'
		mydom.style.top  = y+'px'
		document.body.appendChild(mydom)
		idleint = setInterval( function() { idle() } , 15)
		
		YAHOO.util.Event.addListener(document,'mousemove', updatepos)
		
	}
	
	function updatepos(evt)
	{
		var is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
		var evt = (is_ie ? event : evt);
	
		offx = is_ie ? evt.clientX : evt.pageX;
		offy = is_ie ? evt.clientY : evt.pageY;
		
		mydom.style.left = offx + 'px'
		mydom.style.top  = offy + 'px'		
		
	}
	
	this.changeMessage = function(newmsg)
	{
		document.getElementById('inprogmsg').innerHTML = newmsg
	}
	
	this.end = function()
	{
		clearInterval(idleint)
		YAHOO.util.Event.removeListener(document,'mousemove', updatepos)
		mydom.parentNode.removeChild(mydom)
	}

	function idle()
	{
		document.getElementById('inprogidler').style.backgroundPosition = (--bgidlexpos)%19 + "px 0px";
	}

}

/* Carbine UI chrome */

function CarbineDialog()
{
	var cdom = null
	var contentdom = null
	var truecb = null
	var falsecb = null
	var _gd = null

	this.create = function(innerhtml,truecallback,falsecallback,gd)
	{
		cdom = document.createElement('div')
		cdom.className='carbinedialog'
		_gd = gd
		
		var cdcontent = document.createElement('div')
		contentdom = cdcontent
		cdcontent.innerHTML = innerhtml
		cdom.appendChild(cdcontent)
		
		var buttondiv = document.createElement('div')
		buttondiv.className = 'carbinebuttonrow'
		
		var ok = document.createElement('div')
		ok.className = 'carbinebutton save'
		ok.onclick= function() { destroy(); truecallback() }
		var cl = document.createElement('div')
		cl.className = 'carbinebutton cancel'
		cl.onclick = function() { destroy(); falsecallback() }

		buttondiv.appendChild(cl)		
		buttondiv.appendChild(ok)
		
		cdom.appendChild(buttondiv)
		
		cdom.style.top = 0
		cdom.style.left = _gd.getContainer().clientWidth / 2 - 165 + 'px'
		document.body.appendChild(cdom)
		
	}
	
	this.updateContent = function(innerhtml)
	{
		contentdom.innerHTML = innerhtml
	}
	
	function destroy()
	{
		cdom.parentNode.removeChild(cdom)
		cdom = null
	}

}

function CarbineOptionsBox()
{
	var cdom = null
	var contentdom = null
	var _gd = null
	var _callOnClose = null

	this.create = function(title,links,callOnClose,x,y,gd)
	{
		cdom = document.createElement('div')
		cdom.className='carbineoptionsbox'
		_gd = gd
		_callOnClose = callOnClose
		
		closer = document.createElement('div')
		closer.className='carbineoptionsclose'
		closer.onclick = close
		cdom.appendChild(closer)
		
		var cdcontent = document.createElement('div')
		contentdom = cdcontent
		
		var ttl = document.createElement('div')
		ttl.className='carbineoptionstitle'
		ttl.innerHTML = title
		cdcontent.appendChild(ttl)
		
		for(i=0;i<links.length;i++)
		{
			var opt = links[i]
			var al = document.createElement('a')
			al.innerHTML = opt.text
			al.onclick = opt.link
			al.href='javascript: void(0)'
			cdcontent.appendChild(al)
			cdcontent.appendChild(document.createElement('br'))
		}
		
		//cdcontent.innerHTML = innerhtml
		cdom.appendChild(cdcontent)
				
		cdom.style.top = y - gd.getOffsetY() + 'px'
		cdom.style.left = x - gd.getOffsetX() + 'px'
		gd.getCanvas().appendChild(cdom)
		
	}
	
	this.updateContent = function(innerhtml)
	{
		contentdom.innerHTML = innerhtml
	}
	
	function close()
	{
		destroy()
		_callOnClose()
	}
	//allow children to close
	this.close = close
	
	function destroy()
	{
		cdom.parentNode.removeChild(cdom)
		cdom = null
	}

}