window.addEvent('domready', function(){

  var selectedFriends=new Array();

  var followFriends=new Array();

  var redirectPage = function(){
    window.location='main.php';
  }

  var redirectingPage = function(){
    $('log_res').empty();
    $('log_res').setHTML('<br>redireccionando...');
    $('log_res').addClass('ajax-loading');
  }

  var doCode = function(){
    var code = $('code').value;
    var miDiv=document.createElement("div");
    miDiv.style.display='none';
    var miForm=document.createElement("form");
 	with(miForm){
		name="activateCode";
		target="miIframe";
		action="activate.code.php";
		method="post";
		id="activateCode";
	}
    var miText=document.createElement("input");
    miText.setAttribute("type", "hidden");
    miText.setAttribute("name", "code");
    miText.setAttribute("value", code);
    miForm.appendChild(miText);
    miDiv.appendChild(miForm);
    document.body.appendChild(miDiv);
    miForm.submit();
    document.body.removeChild(miDiv);
  }

  var err=$('log');
  var fx = new Fx.Styles(err, {duration:1000, wait:false, transition: Fx.Transitions.Sine.easeOut});
  myslide = new Fx.Slide(err);
  
  var doHide=function(){
		fx.start(
			{
			'background-color': '#fff',
			'opacity': [0.9, 0],
			'top':'-40px'
			}
		);
		
		err.setHTML("");
  }

  var doLog=function(text){
	  	
		fx.start(
			{
			'background-color': '#fff',
			'opacity': [0, 0.9],
			'top':'0px'
			}
		);
		
		err.setHTML(text);
  }

  var doLogin = function(){
    
    if($('username').value==""){
		doLog('escriba su nombre de usuario Twitter');
		doHide.delay(6000);
		$('username').focus();
      	return false;
    }
    if($('password').value==""){
      	doLog('escriba su password Twitter');
		doHide.delay(6000);
		$('password').focus();
		return false;
    }

    var username = $('username').value;
    var password = $('password').value
    var miDiv=document.createElement("div");
    miDiv.style.display='none';
    var miForm=document.createElement("form");
 	with(miForm){
		name="doLogin";
		target="miIframe";
		action="do.login.php";
		method="post";
		id="doLogin";
	}
    var miText=document.createElement("input");
    miText.setAttribute("type", "hidden");
    miText.setAttribute("name", "username");
    miText.setAttribute("value", username);
    miForm.appendChild(miText);
    var miPass=document.createElement("input");
    miPass.setAttribute("type", "hidden");
    miPass.setAttribute("name", "password");
    miPass.setAttribute("value", password);
    miForm.appendChild(miPass);
    miDiv.appendChild(miForm);
    document.body.appendChild(miDiv);
    miForm.submit();
    document.body.removeChild(miDiv);
    
  }

  if($('btn_login')!=null){
    $('btn_login').addEvent('click', doLogin);
  }
  
  if($('btn_activate')!=null){
   
    var myTool=new ToolTip('btn_activate', '<div id="content" style="float:left;" class="warningtext"><div style="float:left; width:2px; height:37px; background-image:url(images/login_/txt_inicio.png);"></div><input type="text" class="textos" style="float:left; width:290px;" name="code" id="code" /><div style="float:left; width:2px; height:37px; background-image:url(images/login_/txt_fin.png);"></div><div style="float:left; width:100%; height:20px; color:#ff4e00; font-size:8pt; font-weight:bold;" id="warning_label"></div><div id="floatingbutton" class="boton" style="float:left;">Continuar</div></div>', { mode: 'cursor', display: 'block', width: 350, style: 'default', sticky: 1 
    });

    $('floatingbutton').addEvent('click', doCode);

    $('btn_activate').addEvents({

       'codeNF' : function(){
         $('content').setHTML('El c&oacute;digo no fue encontrado<p><a href="javascript:;" class="topblue" onclick="$(\'btn_activate\').fireEvent(\'refreshHTML\');">Reintentar</a></p>');
       },

      'refreshHTML' : function(){
        $('content').setHTML('<div style="float:left; width:2px; height:37px; background-image:url(images/login_/txt_inicio.png);"></div><input type="text" class="textos" style="float:left; width:290px;" name="code" id="code" /><div style="float:left; width:2px; height:37px; background-image:url(images/login_/txt_fin.png);"></div><div style="float:left; width:100%; height:20px; color:#ff4e00; font-size:8pt; font-weight:bold;" id="warning_label"></div><div id="floatingbutton" class="boton" style="float:left;">Continuar</div>');
        $('floatingbutton').addEvent('click', doCode);
      },

      'codeActive' : function(){
        $('content').setHTML('El c&oacute;digo ya fu&eacute; activado<p><a href="javascript:;" class="topblue" onclick="$(\'btn_activate\').fireEvent(\'refreshHTML\');">Reintentar</a></p>');
      },

      'codeExpired' : function(){
        $('content').setHTML('Su cuenta parece estar vencida<p><a href="javascript:;" class="topblue" onclick="$(\'btn_activate\').fireEvent(\'refreshHTML\');">Reintentar</a></p>');
      },

      'codeDown' : function(){
        $('content').setHTML('El usuario se encuntra de baja en el servicio<p><a href="javascript:;" class="topblue" onclick="$(\'btn_activate\').fireEvent(\'refreshHTML\');">Reintentar</a></p>');
      }

    });

  }

  if($('frmConfig')!=null){
    
    $('frmConfig').addEvent('submit', function(e) {
      new Event(e).stop();
      $('selectedUsers').value="";
      $('accept').addEvent('click', function(){
	$('accept').value="yes";
      });
      for(var i=0;i<selectedFriends.length;i++){
	$('selectedUsers').value+=selectedFriends[i]+"@";
      }
      
      var log=$('log_res').empty();
      
      this.send({
	update: log,
        onComplete:function(){
          log.removeClass('ajax-loading');
	  if(log.innerHTML=="completo!!<br>Iniciando Sesi&oacute;n"){
	    var myTime=redirectPage.delay(5000);
            var myPerio=redirectingPage.periodical(1000);
	  }
	},
	onRequest:function(){
	  log.addClass('ajax-loading');
	}
      });
      
      if($('new_day').value!="" && $('sex').value!="" && $('pais').value!="" && $('departamento').value!="" && $('selectedUsers').value!="" && $('accept').value!=""){
	var myTime=redirectPage.delay(5000);
        var myPerio=redirectingPage.periodical(1000);
      }
    });

    var pais = $('pais');
    var departamento = $('departamento');
    

    var paises = ["El Salvador", "Guatemala", "Honduras", "Mexico", "Colombia", "Paraguay"];
    var departamentos = ["Ahuachapan", "Santa Ana", "Sonsonate", "Chalatenango", "La Libertad", "San Salvador", "Cuscatlan", "La Paz", "San Vicente", "Morazan", "Cabanas", "San Miguel", "Usulutan", "La Union"];
 
    var pais_completer = new Autocompleter.Local(pais, paises);
    var depto_completer = new Autocompleter.Local(departamento, departamentos);

    var passtwitter=$("passtwitter");
    var usertwitter=$("usertwitter");

    var load_users=$('load_users');

    load_users.addEvent('click', function(e){
      e = new Event(e).stop();
      var txt_usertwitter=usertwitter.value;
      var txt_passtwitter=passtwitter.value;
      var url = 'friends.json.php?user='+txt_usertwitter+'&pass='+txt_passtwitter;
      if(usertwitter.value!="" && passtwitter.value!=""){
	var request = new Json.Remote(url, {
	  onComplete: function(jsonObj) {
            addFriends(jsonObj.friends);
	  },
	  onRequest: function(){
	    var myfriends = $('friends');
	    myfriends.empty();
	    var el = new Element('div', {'class': 'no-friends'});
	    el.setStyle('text-align', 'center');
	    var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	    var span = new Element('span').setHTML("cargando...").injectAfter(img);
	    span.setStyle('color','#CCC');
	    el.injectInside(myfriends);
	  }
	}).send();
      }else{
	
      }
    });

    var addFriends = function(friends){
      var myfriends = $('friends');
      var nDiv=new Element('div').setStyle('width', '100%');
      nDiv.setStyle('height','100%');
      var i=0;
      friends.each(function(friend) {
        var el = new Element('div', {'class': 'normal'});
	var div = new Element('div').injectInside(el);
 	var img = new Element('img', {'src': friend.image, 'width':48, 'height':48}).injectInside(div);
	div.setStyle('cursor','pointer');
	div.setStyle('float','left');
	div.setStyle('width','100%');
	var screen_name = new Element('span').setHTML(friend.screen_name).injectAfter(div);
	el.id=friend.id;
	screen_name.setStyle('cursor', 'pointer');
	el.inject(nDiv);
	el.addEvent('click', function(){
	  if($(friend.id).hasClass('selected')){
	    $(friend.id).removeClass('selected');
	    $(friend.id).addClass('normal');
	    if(selectedFriends.test(friend.screen_name)){
	      selectedFriends.remove(friend.screen_name);
	    }
	  }else{
	    $(friend.id).removeClass('normal');
	    $(friend.id).addClass('selected');
	    if(!selectedFriends.test(friend.screen_name)){
	      selectedFriends.extend([friend.screen_name]);
	    }
	  }
	});
	i++;
      });
      if(i<=1){
	myfriends.empty();	
	var el = new Element('div', {'class': 'no-friends'});
	var span = new Element('span').setHTML('No se encontraron datos referente al usuario y password proporcionados').injectInside(el);
	el.inject(myfriends);
	return false;
      }else{
	myfriends.empty();
	nDiv.injectInside(myfriends);
      }
    }

  }

  $$('input.DatePicker').each( function(el){
    new DatePicker(el);
  });

  if($('wad')!=null){
    $('wad').addEvent('keyup', function(e){
      var m = new Event(e);
      var chars = $('wad').value.length;
      var counter = $('counting_chars').innerHTML;
      counter=140-chars;
      if(counter<0){
	$('wad').value=$('wad').value.substr(0, 140);
	return false;
      }
      $('counting_chars').setHTML(counter);
    });

    $('btn_update').addEvent('click', function(e){
      var e = new Event(e).stop();
      if($('wad').value==""){
	return false;
      }
      var url = "status.update.php?s="+$('wad').value;
      
      new Ajax(url, {
	method:'get',
	update:$('myTimeline'),
	onRequest: function(){
	  var myTimeline=$('myTimeline');
	  myTimeline.empty();
	  var el = new Element('div', {'class': 'no-friends'});
 	  el.setStyle('text-align', 'center');
	  el.setStyle('text-align', 'center');
	  var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	  var span = new Element('span').setHTML("actualizando...").injectAfter(img);
	  span.setStyle('color','#CCC');
	  el.injectInside(myTimeline);
	  $('wad').value="";
	  $('counting_chars').setHTML("140");
	}
      }).request();
    });

    $('doHome').addEvent('click', function(e){
      var e = new Event(e).stop();
      var url = "status.update.php?s=";
      
      new Ajax(url, {
	method:'get',
	update:$('myTimeline'),
	onRequest: function(){
	  var myTimeline=$('myTimeline');
	  myTimeline.empty();
	  var el = new Element('div', {'class': 'no-friends'});
 	  el.setStyle('text-align', 'center');
	  el.setStyle('text-align', 'center');
	  var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	  var span = new Element('span').setHTML("cargando...").injectAfter(img);
	  span.setStyle('color','#CCC');
	  el.injectInside(myTimeline);
	  $('wad').value="";
	  $('counting_chars').setHTML("140");
	}
      }).request();
    });

    $('brand_').setStyle('cursor','pointer');

    $('brand_').addEvent('click', function(e){
      var e = new Event(e).stop();
      var url = "status.update.php?s=";
      
      new Ajax(url, {
	method:'get',
	update:$('myTimeline'),
	onRequest: function(){
	  var myTimeline=$('myTimeline');
	  myTimeline.empty();
	  var el = new Element('div', {'class': 'no-friends'});
 	  el.setStyle('text-align', 'center');
	  el.setStyle('text-align', 'center');
	  var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	  var span = new Element('span').setHTML("cargando...").injectAfter(img);
	  span.setStyle('color','#CCC');
	  el.injectInside(myTimeline);
	  $('wad').value="";
	  $('counting_chars').setHTML("140");
	}
      }).request();
    });

    $('doReplies').addEvent('click', function(e){
      var e = new Event(e).stop();
      var url = "status.update.php?r=";
      
      new Ajax(url, {
	method:'get',
	update:$('myTimeline'),
	onRequest: function(){
	  var myTimeline=$('myTimeline');
	  myTimeline.empty();
	  var el = new Element('div', {'class': 'no-friends'});
 	  el.setStyle('text-align', 'center');
	  el.setStyle('text-align', 'center');
	  var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	  var span = new Element('span').setHTML("cargando...").injectAfter(img);
	  span.setStyle('color','#CCC');
	  el.injectInside(myTimeline);
	  $('wad').value="";
	  $('counting_chars').setHTML("140");
	}
      }).request();
    });

    $('logout').addEvent("click", function doOption(option){
      window.location="do.logout.php";
    });

    $('settings').addEvent("click", function doOption(option){
      window.location="do.settings.php";
    });

  }

  if($('interval')!=null){

    var url = 'friends.json.php?idTwitterUser='+$('idTwitterUser').value;
    var request = new Json.Remote(url, {
      onComplete: function(jsonObj) {
        fillArrayFriends(jsonObj.friends);
      }
    }).send();

    var fx = new Fx.Styles($('opciones'), {duration:500, wait:false});

    var pos=$('interval').getCoordinates();

    $('opciones').setStyle('top', (pos.top+35)+'px');
    $('opciones').setStyle('left', (pos.left-1)+'px');
    $('opciones').setStyle('opacity', 0.9);

    var hideOpciones=function(){
      fx.start({
	'height':'0px'
      });    
    }

    var myTime;
    
    var list = $$('#opciones li');

    $('interval').addEvent('click', function(){
      $('interval').setStyle('display','block');
      list.each(function(element) {
	var efex = new Fx.Styles(element, {duration:200, wait:false});
     	element.setStyle('cursor','pointer');
  	element.addEvent('mouseenter', function(){
		efex.start({
			'margin-left': 2,
			'background-color': '#666',
			color: '#ff8'
		});
	});

	element.addEvent('mouseleave', function(){
		efex.start({
			'margin-left': 0,
			'background-color': '#333',
			'color': '#048af1'
		});
	});

	element.addEvent('click', function(){
	  $('interval').value=element.innerHTML;
	  fx.start({
	    'height':'0px'
          }); 
	});

      });
      fx.start({
	'height':'190px'
      });
    });

    $('opciones').addEvent('mouseleave', function(){
      myTimer=hideOpciones.delay(3000);
    });

    $('opciones').addEvent('mouseenter', function(){
      myTimer=$clear(myTimer);
    });

    var fillArrayFriends=function(friends){
      friends.each(function(friend) {
        followFriends.extend([friend.screen_name]);
      });
    }

    var addFriends = function(friends){
      var myfriends = $('friends');
      var nDiv=new Element('div').setStyle('width', '100%');
      nDiv.setStyle('height','100%');
      var i=0;
      friends.each(function(friend) {
        var el = new Element('div', {'class': 'normal'});
	if(followFriends.test(friend.screen_name)){
	    el.addClass('selected');
	    selectedFriends.extend([friend.screen_name]);
      	}
	var div = new Element('div').injectInside(el);
 	var img = new Element('img', {'src': friend.image, 'width':48, 'height':48}).injectInside(div);
	div.setStyle('cursor','pointer');
	div.setStyle('float','left');
	div.setStyle('width','100%');
	var screen_name = new Element('span').setHTML(friend.screen_name).injectAfter(div);
	el.id=friend.id;
	screen_name.setStyle('cursor', 'pointer');
	el.inject(nDiv);

	el.addEvent('click', function(){
	  if($(friend.id).hasClass('selected')){
	    $(friend.id).removeClass('selected');
	    $(friend.id).addClass('normal');
	    if(selectedFriends.test(friend.screen_name)){
	      selectedFriends.remove(friend.screen_name);
	    }
	  }else{
	    $(friend.id).removeClass('normal');
	    $(friend.id).addClass('selected');
	    if(!selectedFriends.test(friend.screen_name)){
	      selectedFriends.extend([friend.screen_name]);
	    }
	  }
	});
	i++;
      });
      if(i<=1){
	myfriends.empty();	
	var el = new Element('div', {'class': 'no-friends'});
	var span = new Element('span').setHTML('No se encontraron datos referente al usuario y password proporcionados').injectInside(el);
	el.inject(myfriends);
	return false;
      }else{
	myfriends.empty();
	nDiv.injectInside(myfriends);
      }
    }

    $('friends').addEvent('loadFriends', function(){
      var txt_usertwitter=$("usertwitter").value;
      var txt_passtwitter=$("passtwitter").value;
      var url = 'friends.json.php?user='+txt_usertwitter+'&pass='+txt_passtwitter;
      if($("usertwitter").value!="" && $("passtwitter").value!=""){
	var request = new Json.Remote(url, {
	  onComplete: function(jsonObj) {
            addFriends(jsonObj.friends);
	  },
	  onRequest: function(){
	    var myfriends = $('friends');
	    myfriends.empty();
	    var el = new Element('div', {'class': 'no-friends'});
	    el.setStyle('text-align', 'center');
	    var img = new Element('img', {'src':'images/general_/spinner.gif', 'width':16, 'height':16}).injectInside(el);
	    var span = new Element('span').setHTML("cargando...").injectAfter(img);
	    span.setStyle('color','#CCC');
	    el.injectInside(myfriends);
	  }
	}).send();
      }else{
	
      }
    });

    $('friends').fireEvent('loadFriends');

    $('load_users').addEvent('click', function(){
      $('friends').fireEvent('loadFriends');
      $('selectedUsers').value="";
      selectedFriends.length=0;
      var url = 'friends.json.php?idTwitterUser='+$('idTwitterUser').value;
      var request = new Json.Remote(url, {
        onComplete: function(jsonObj) {
          fillArrayFriends(jsonObj.friends);
        }
      }).send();
    });

    $('frmSettings').addEvent('submit', function(e) {
      new Event(e).stop();
      $('selectedUsers').value="";
      for(var i=0;i<selectedFriends.length;i++){
	$('selectedUsers').value+=selectedFriends[i]+"@";
      }
      var log=$('log_res').empty();
      this.send({
	update: log,
	onRequest:function(){
	  log.setHTML("Enviando datos");
	  log.addClass('ajax-loading');
	},
	onComplete:function(){
          log.removeClass('ajax-loading');
          if(log.innerHTML=="completo!!"){
	    var myTime=redirectPage.delay(5000);
            var myPerio=redirectingPage.periodical(1000);
	  }
	}
      });
    });

  }

});