var selectedFlirtID = -1;

function setSelectedFlirt (value)
{
  selectedFlirtID = value;
}

var Flirt = Class.create({
	initialize	: function(extra_set){
		this.settings = {
			loading_image	: '/templates/nimble_2008_001/images/facebox/loading.gif',
			close_image		: '/templates/nimble_2008_001/images/facebox/closelabel.gif',
			image_types		: new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
      USER_SENDER_ID : 0,
      USER_RECIPIENT_ID : 0,
      inited				: true,
      facebox_html	: '\
	  <div id="facebox_flirt" style="display:none;"> \
	    <div class="popup"> \
	      <table id="facebox_table"> \
	        <tbody> \
	          <tr> \
	            <td class="tl"/><td class="b"/><td class="tr"/> \
	          </tr> \
	          <tr> \
	            <td class="b"/> \
	            <td class="body"> \
                <div style="padding:10px; margin-left:-10px; margin-top:-10px; margin-right:-10px; font-size:16px; font-weight:bold; color:#FFF; background-color:#044d78;">\
                  ' + LANG_JS000101 + '\
                </div>\
	              <div class="content"> \
	              </div> \
	              <div class="footer"> \
	                <a href="#" id="facebox_flirt_close"> \
	                  <img src="/templates/nimble_2008_001/images/facebox/closelabel.gif" title="close" id="facebox_flirt_close_image" /> \
	                </a> \
	              </div> \
	            </td> \
	            <td class="b"/> \
	          </tr> \
	          <tr> \
	            <td class="bl"/><td class="b"/><td class="br"/> \
	          </tr> \
	        </tbody> \
	      </table> \
	    </div> \
	  </div>'
		};
    if (extra_set) Object.extend(this.settings, extra_set);
		$(document.body).insert({bottom: this.settings.facebox_html});
		
		this.preload = [ new Image(), new Image() ];
		this.preload[0].src = this.settings.close_image;
		this.preload[1].src = this.settings.loading_image;
 
		f = this;
		$$('#facebox_flirt .b:first, #facebox_flirt .bl, #facebox_flirt .br, #facebox_flirt .tl, #facebox_flirt .tr').each(function(elem){
			f.preload.push(new Image());
			f.preload.slice(-1).src = elem.getStyle('background-image').replace(/url\((.+)\)/, '$1');
		});
 
		this.facebox = $('facebox_flirt');
    this.keyPressListener = this.watchKeyPress.bindAsEventListener(this);
    
		this.watchClickEvents();
	},
 
  watchKeyPress : function(e){
    // Close if espace is pressed or if there's a click outside of the facebox
    if (e.keyCode == 27 || !Event.element(e).descendantOf(this.facebox)) this.close();
  },
 
	watchClickEvents	: function(e){
    var f = this;
    $$('.showOverlayFlirt').invoke('observe', 'click', function(event) {event.stop(); f.click_handler(event);}.bindAsEventListener(this));
	},
 
	loading	: function() {
		if ($$('#facebox_flirt .loading').length == 1) return true;
 
		contentWrapper = $$('#facebox_flirt .content').first();
		contentWrapper.childElements().each(function(elem, i){
			elem.remove();
		});
		contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
 
		var pageScroll = document.viewport.getScrollOffsets();
		this.facebox.setStyle({
			'top': pageScroll.top + (document.viewport.getHeight() / 10) + 50 + 'px',
			'left': document.viewport.getWidth() / 2 - (this.facebox.getWidth() / 2) + 'px'
		});
 
    Event.observe(document, 'keypress', this.keyPressListener);
    Event.observe(document, 'click', this.keyPressListener);
	},
 
	reveal	: function(data, klass){
    this.loading();
		load = $$('#facebox_flirt .loading').first();
		if(load) load.remove();
 
		contentWrapper = $$('#facebox_flirt .content').first();
		if (klass) contentWrapper.addClassName(klass);
		//contentWrapper.insert({bottom: data});
		contentWrapper.update(data);
 
    $$('#facebox_flirt .body').first().childElements().each(function(elem,i){
     elem.show();
    });
    		
		if(!this.facebox.visible()) new Effect.Appear(this.facebox, {duration: .0});
		this.facebox.setStyle({
			'left': document.viewport.getWidth() / 2 - (this.facebox.getWidth() / 2) - 80 + 'px'
		});
 
    Event.observe(document, 'keypress', this.keyPressListener);
    Event.observe(document, 'click', this.keyPressListener);
	},
 
	close		: function(){
     new Effect.Fade('facebox_flirt', {duration: .0});
	},
 
	loadInitialContent		: function(event){

		fb = this;
		Event.observe($('facebox_flirt_close'), 'click', function(e){
			Event.stop(e);
			fb.close();
		});
		Event.observe($('facebox_flirt_close_image'), 'click', function(e){
      Event.stop(e);
			fb.close();
		});

    var a = event.element().getAttribute('rel').split(';', 2)
    this.settings.USER_SENDER_ID = a[0];
    this.settings.USER_RECIPIENT_ID = a[1];
    
    HandlerURL = GJ_WEBSITE_URL + 'flirt/loadContent.html';
    
    new Ajax.Request(HandlerURL, {
      method: 'post',
      parameters: 'AJAX=true&USER_SENDER_ID=' + this.settings.USER_SENDER_ID + '&USER_RECIPIENT_ID=' + this.settings.USER_RECIPIENT_ID,
      
      onCreate: function()
      {
        //  
      }.bind(this),
      
      onSuccess: function(transport) 
      {
        if(!transport.responseText.match(/http/))
        {
          this.reveal('<div class="flirt_error_message">' + transport.responseText + '</div>', false);
          this.close.delay(2);
        }
        else
        {
          var a = transport.responseText.split(';');
          
          var tempContent = '';
          for(i=2;i<a.length;i++)
          {
            var b = a[i].split(':');
            
            if (b[1] != undefined)
            {
              tempContent = tempContent + '<div class="flirt_flirt">\
              <input type="radio" onClick="setSelectedFlirt(\'' + b[0] + '\')"; name="flirt-type-radio" id="flirt-type-radio" value="' + b[0] + '">&nbsp;' + b[1] + '</div>';
            }
          }

          var faceboxContent = '\
            <div class="flirt_main_content">\
              <div class="flirt_title"><img src="' + GJ_WEBSITE_URL + 'templates/nimble_2008_001/images/icon_flirt.gif" border="0" />&nbsp;&nbsp;' + LANG_JS000102 + ' <a href="' + GJ_WEBSITE_URL + this.settings.USER_RECIPIENT_ID  + '.html">' + a[1] + '</a></div>\
              <div class="flirt_subject_title">' + LANG_JS000103 + '</div>\
            </div>\
            <div id="user_image_friendrequest" style="padding:5px; float:right;">\
              <img style="padding:3px; border:1px solid #cccccc;" src="' + a[0] + '" alt="' + a[1] + '" />\
            </div>\
            <div style="font-size:2px; clear:both;">&nbsp;</div>\
            <div class="flirt_container">' + tempContent + '</div>\
            <div style="font-size:2px; clear:both;">&nbsp;</div>\
            <div style="padding:3px;"><input type="radio" onClick="setSelectedFlirt(\'-1\')"; checked name="flirt-type-radio" id="nisse_pisse" value="-1">&nbsp;&nbsp;<input type="text" id="own_flirt_textbox" name="own_flirt_textbox" class="flirt_own_flirtbox" value="' + LANG_JS000104 + '"></div>\
            <div style="padding-top:10px;"><input type="button" name="flirt_submit_button" id="flirt_submit_button" class="button_108" value="' + LANG_JS000018 + '" /></div>\
            <div class="flirt_message_area" id="flirt_message_area" name="flirt_message_area"></div>\
          <div style="font-size:2px; clear:both;">&nbsp;</div>';

          this.reveal(faceboxContent, false);
          
      		temp = this;

          Event.observe($('own_flirt_textbox'), 'focus', function(e){
      			Event.stop(e);
            temp.clickOwnFlirtBox('focus');
      		});

          Event.observe($('own_flirt_textbox'), 'blur', function(e){
      			Event.stop(e);
            temp.clickOwnFlirtBox('blur');
      		});

          Event.observe($('flirt_submit_button'), 'click', function(e){
      			Event.stop(e);
            temp.sendRequest();
      		});
        }
      }.bind(this), // Required for correct scope
      
      onFailure: function()
      {
        return LANG_JS000029;
      }.bind(this),
      
      onComplete: function(transport)
      {
        //
      }.bind(this)
    });    
	},

  clickOwnFlirtBox: function(theEvent)
  {
    if ($('own_flirt_textbox').value == LANG_JS000104)
    {
      $('own_flirt_textbox').value = '';
      selectedFlirtID = -1;
      $('nisse_pisse').checked = true;
    }
    else if ($('own_flirt_textbox').value == '')
    {
      $('own_flirt_textbox').value = LANG_JS000104;
    }
  },

  // AJAX SEND MESSAGE
  sendRequest: function() {
  
    if (selectedFlirtID == -1)
    {
      if ($('own_flirt_textbox').value == '' || $('own_flirt_textbox').value == LANG_JS000104)
      {
        $('flirt_message_area').update('<img src="' + GJ_WEBSITE_URL + 'templates/nimble_2008_001/images/frontpage/logout2.gif" border="0" /> ' + LANG_JS000105);
        return false;
      }
    }

    HandlerURL = GJ_WEBSITE_URL + 'flirt/sendFlirt.html';
    
    new Ajax.Request(HandlerURL, {
      
      method: 'post',
      parameters: 'AJAX=true&USER_SENDER_ID=' + this.settings.USER_SENDER_ID + '&USER_RECIPIENT_ID=' + this.settings.USER_RECIPIENT_ID + '&FLIRT_ID=' + selectedFlirtID + '&FLIRTBOX=' + $('own_flirt_textbox').value,
      
      onCreate: function()
      {
        //
      },
      onSuccess: function(transport) 
      {
        selectedFlirtID = -1;
        this.reveal('<div class="flirt_error_message"><img src="' + GJ_WEBSITE_URL + 'templates/nimble_2008_001/images/tick.png" border="0" /> ' + LANG_JS000106 + '</div>', false);
        this.close.delay(2);
      }.bind(this), // Required for correct scope
      
      onFailure: function()
      {
        alert(LANG_JS000031);
      },
      
      onComplete: function(transport)
      {
        // Do something
      }
    });
  },

	click_handler	: function(e){
	  this.loading();
		Event.stop(e);
		
    
    //this.reveal(this.settings.faceboxContent, false);
    this.loadInitialContent(e);
   }	
});

document.observe('dom:loaded', function () { new Flirt(); });