var headsup = Class.create({
    initialize: function(options)
    {
        d = new Date()
        this.idStamp = d.getTime()
        
        this.options = typeof options == 'undefined'? {} : options
        this.content = typeof this.options.content == 'undefined'? null : this.options.content
        this.closeColor = typeof this.options.closeColor == 'undefined'? '#fff' : this.options.closeColor
        this.url = typeof this.options.url == 'undefined'? null : this.options.url
        this.width = typeof this.options.width == 'undefined'? '300px' : this.options.width
        this.height = typeof this.options.height == 'undefined'? '300px': this.options.height
        this.bigbutton = typeof this.options.bigbutton == 'undefined'? false : this.options.bigbutton
        this.type = typeof this.options.type == 'undefined'? 'major': this.options.type
        this.backdrop = typeof this.options.backdrop == 'undefined'? false : this.options.backdrop
        this.backdropOpacity = typeof this.options.backdropOpacity == 'undefined'? '0.5' : this.options.backdropOpacity
        this.duration = typeof this.options.duration == 'undefined'? .5 : this.options.duration
        this.onLoad = typeof this.options.onLoad == 'undefined'? false : this.options.onLoad
        this.backdropOpacity = typeof this.options.backdropOpacity == 'undefined'? '0.5' : this.options.backdropOpacity


        this.width  = parseInt(this.width.replace(/px$/, ''))
        this.height = parseInt(this.height.replace(/px$/, ''))
        
        this._build()
        
    },
    _backdrop: function()
    {
        this.bde = new Element('div', {id: 'backdrop' + this.idStamp})
        // Fix cause IE is a faggot browser
        
        //this.bde = document.createElement('div')
        this.bde.setAttribute('id', 'backdrop' + this.idStamp)
        this.bde.setStyle({
            position:'absolute',
            background:'#000',
            top:'0',
            left:'0',
            width:'100%',
            height:'100%',
            opacity: this.backdropOpacity,
            display:'none',
            zIndex:'700'
        })
        document.body.appendChild(this.bde)
    },
    
    _background: function()
    {
        this.hud = new Element('div', {id: 'hud' + this.idStamp})
		// Fix cause IE is a piece of sh*t
		//this.hud = document.createElement('div')
		this.hud.setAttribute('id', 'hud' + this.idStamp)
        var hudTop = (this.height / 2) + 'px'
        var hudLeft = (this.width / 2) + 'px'

        if(this.type == 'major')
        {
            var top = '50%'
            var left = '50%'
            var mTop = '-' + hudTop
            var mLeft = '-' + hudLeft
        }
        else
        {
            var top = '25px'
            var left =  (document.viewport.getWidth() - this.width - 10) + 'px'
            var mTop = 0
            var mLeft = 0
        }


        this.hud.setStyle({
            position:'absolute',
            background: '#000',
            height: this.height + 'px',
            width: this.width + 'px',
            top:top,
            left:left,
            marginTop:mTop,
            marginLeft:mLeft,
            opacity: '.7',
            zIndex:'800',
            display:'none'
        })
        document.body.appendChild(this.hud)
        Rico.Corner.round(this.hud)
    },
    
    _content: function()
    {
      //this.iHud = new Element('div', {id:'iHud' + this.idStamp})
      //Do i even have to say it?
      this.iHud = document.createElement('div')
      this.iHud.setAttribute('id', 'iHud' + this.idStamp)
      var iHTop = (this.height / 2) + 'px'
      var iHLeft = (this.width / 2) + 'px'
      
      if(this.type == 'major')
      {
          var top = '50%'
          var left = '50%'
          var mTop = '-' + iHTop
          var mLeft = '-' + iHLeft
      }
      else
      {
          var top = '25px'
          var left =  (document.viewport.getWidth() - this.width - 10) + 'px'
          var mTop = 0
          var mLeft = 0
      }
      
      $(this.iHud).setStyle({
          position:'absolute',
          height:this.height + 'px',
          width: this.width + 'px',
          top:top,
          left:left,
          marginTop: mTop,
          marginLeft: mLeft,
          padding: '20px',
          color:"#fff",
          zIndex:'900',
          display:'none'
      })
      
      this.cluse = new Element('div').update('continue')
      
      this.cluse.setStyle({
          color:this.closeColor,
          marginTop:'-37px',
          marginBottom: '20px',
          marginRight:'25px',
          textAlign: 'right',
          cursor:'pointer'
      })

      //this.cluse.innerHTML = 'close'
      

      
      var content = this.content == null && this.url != null? this._ajax() : this.content
      
      
      this.iHudContent = new Element('div').update(content)

      this.iHudContent.setStyle({
          marginRight:'37px'
      })
      
      this.iHud.appendChild(this.cluse)
      this.iHud.appendChild(this.iHudContent)
      document.body.appendChild(this.iHud)

	  if(this.bigbutton == true)
	  {
 	      this.cluseAlso = new Element('div').setStyle({
    	  	color:'#fff',
	      	cursor:'pointer',
	      	textAlign:'center',
	      	padding:'5px',
	      	background:'black',
	      	border:'1px solid #000',
	      	marginTop: '16px',
	        marginBottom: '20px',
	        marginRight:'40px'
	      })
      
    	  this.cluseAlso.innerHTML = 'click to continue'
	      this.iHud.appendChild(this.cluseAlso)
	      Rico.Corner.round(this.cluseAlso)
	      Event.observe(this.cluseAlso, 'click', this.close.bindAsEventListener(this));
	  }

      Event.observe(this.cluse, 'click', this.close.bindAsEventListener(this));
    },
    
    hudDetails: function()
    {
        return {background: this.hud.id, content: this.iHud.id}
        
    },
    
    _ajax: function()
    {
        new Ajax.Request(this.url, {
            method: 'get',
            asynchronous: false,
            onSuccess: function(response) {
                this.ajaxResponse = response.responseText
            }.bind(this)
        })
        return this.ajaxResponse
    },
    
    _show: function() 
    {
        if(this.backdrop)
        {
            Effect.toggle(this.bde, 'appear', {duration:this.duration, to:this.backdropOpacity, afterFinish: function(){ 
                Effect.toggle(this.hud, 'appear', {duration:this.duration, to:'.7'})
                Effect.toggle(this.iHud, 'appear', {duration:this.duration})
            }.bind(this)})    
            
            if(this.onLoad) this.onLoad()        
        }
        else
        {
            Effect.toggle(this.hud, 'appear', {duration:this.duration, to:'.7', afterFinish: function(){
                Effect.toggle(this.iHud, 'appear', {duration:this.duration})                
            }.bind(this)})
        }
        
        
        
    },
    
    _build: function()
    {
        if(this.backdrop)
            this._backdrop()            
        this._background()
        this._content()
        this._show()
    },
    
    close: function()
    {
        if(this.backdrop)
            Effect.toggle(this.bde, 'appear', {duration:this.duration})
            
        Effect.toggle(this.hud, 'appear', {duration:this.duration})
        Effect.toggle(this.iHud, 'appear', {
            duration:this.duration,
            afterFinish: function() { 
                this._destroy()
            }.bind(this)
        })
        
    },
    _destroy: function()
    {
        if(this.backdrop)
            document.body.removeChild(this.bde)
            
        document.body.removeChild(this.iHud)
        document.body.removeChild(this.hud)                    
    }
})