var tplCategory='spoon';
var debug=true;
engine.loadModule('leftandright','lightbox');
var secureStats=new Array();
var optionBackgroundColors=new Array();
secureStats[0]='';
secureStats[1]='OnlyOnlyJoinR';
secureStats[2]='OnlyFriends';
secureStats[3]='OnlyOnlyMe';
var walkTexts=new Array();

document.ondragstart=function()
{ 
	return false;
}
function callWalkText()
{
	for(var i=0;i<walkTexts.length;i++)
	{
		if(walkTexts[i])
		{
			if(walkTexts[i].offsetLeft<walkTexts[i].offsetWidth+walkTexts[i].parentNode.offsetWidth)
				walkTexts[i].style.left=walkTexts[i].offsetLeft+10+'px';
			else
				walkTexts[i].style.left='0px';	
		}	
		else
		{
			walkTexts.splice(i,1);
			break;
		}
	}
	
	setTimeout('callWalkText()',150);
}
callWalkText();
function Space()
{
  this.tabs=new Array();
  this.ids =new Array();
  this.activeTab=null;
  this.posMode=0;
  this.tabModus=0; //rename active?
  this.workingImg='http://aa.joinrcdn.de/images/space/load/smallwhite.gif';
  this.tabEdit='';
  this.tabEditIsIn=0;
  this.writeSpace=$('data');
  this.height=0;
  var fields=new Array();
  if($('colors'))
   fields=$('colors').getElementsByTagName('div');
  for(var i=0;i<fields.length;i++)
  {
    optionBackgroundColors[parseColor(fields[i].style.backgroundColor).toLowerCase()]= fields[i];
    
    engine.object.addEvent(fields[i],'click',function(e)
    {
       var ob;
       
          if(e.target)
            ob=e.target;
          else
            ob=e.srcElement;        
            
           var color=ob.style.backgroundColor;
           
        space.setBackgroundColor(color);
  
        
        
    }) 
  }  
  this.convert=function()
  {
      alert("Bitte kontaktiere den Support!");
      return;
      $('loadText').innerHTML='<img src="http://aa.joinrcdn.de/images/space/load/smallwhite.gif"> Webseite wird konvertiert...';
 //   engine.ajax.addRequest('/ajax.php?f=convert&k=spoon&name='+USpaceName,function(){window.location.reload();});  
    
  }
  this.cancelTabEdit=function()
  {
      space.setBackgroundColor(this.activeTab.data['TColor']);
      space.setBackgroundImage(this.activeTab.data['TBg']);        
  menuShow(this,'topContBoxAddModul')
  }

    
  this.setPosMode=function(mode)
  {
  	if(this.posMode==mode)
  		return;
  	if(this.posMode==0)
  	{
  		//todo
  		//set relativ and left=0 and top=0
  		//take SLeft etc. tosave table pos
  	}
  }
  this.loadTab=function(id,name,data,order)
  {
    data['TSecure']=getint(data['TMode'],0,2)>0?getint(data['TMode'],0,2):0;

    this.ids[id] =this.tabs.length;
    var tab=new Tab(id,name,data,order);  
    this.tabs[this.tabs.length]=tab;
    var aTab=document.createElement('div');
   

    aTab.className="tab"+secureStats[data['TSecure']];
    aTab.id='tab'+id;
    aTab.innerHTML='<div id="tabText'+id+'" class="tabText" style="float:left"><a href="#'+tab.data['TUrl']+'">'+name+'</a></div>'+
    '<div class="tabMore pngHack" style="float:left"></div>'+
    '<div id="tabedit'+id+'" style="display:none; float:left; width:55px; border:2px sold red; margin-top:-2px;">'+
      '<div class="tabEdit" onmouseover="engine.grafic.transparency(this,50)" onmouseout="engine.grafic.transparency(this,0)" onclick="space.getTabById('+id+').edit()"></div>'+
      '<div class="tabDel" onmouseover="engine.grafic.transparency(this,50)" onmouseout="engine.grafic.transparency(this,0)" onclick="space.getTabById('+id+').remove()"></div>'+
//      '<div class="'+(data['TSecure']?'tabLock':'tabUnlock')+'" onmouseover="engine.grafic.transparency(this,50); this.className=\''+(data['TSecure']?'tabUnlock':'tabLock')+'\'" onmouseout="engine.grafic.transparency(this,0);  this.className=\''+(data['TSecure']?'tabLock':'tabUnlock')+'\'"></div>'+
    '</div>'+
    '</div>';
    // todo: lock & pw protection
    
 
                   
     engine.object.addEvent(document,'mouseup',function()
                                            {
                                              if(space.tabEdit && !space.tabEditIsIn)
                                              {
                                                if(!engine.object.isIn('tab'+space.tabEdit.id))
                                                {
                                                  space.tabEdit.hiddeEdit();
                                                  space.tabEdit='';
                                                }
                                              }
                                            }
                          );                            
                          
                          
    if(edit)
    {                       
	    var data=
	    {
	      fstop:function(){ space.saveOrder(); space.setEventsTab($('tab'+id),id); },
	      ffast:function(){ space.getTabById(id).draw();}      
	    }
	    engine.leftandright.beginn(aTab,data);
    }
    else
    {
        engine.object.addEvent(aTab,'mouseup',function(){ space.getTabById(id).draw();}  );   
    }
    
    
    $('tabs').appendChild(aTab);
        this.setEventsTab(aTab,id);     
    
    if(this.tabs.length==1 && !window.location.hash.length)
    {
        if(edit)
        {
          this.tabs[0].setMenuActive();
          this.tabs[0].draw();
        }
    }      
    return this.tabs[this.tabs.length-1];
  }
  this.setColorToOption=function(color)
  {
  	if(!edit)
  		return;
    color=parseColor(color);
    $('tabBackgroundColor').value=color;
    if(color && optionBackgroundColors[color.toLowerCase()])
    {
      var ob=optionBackgroundColors[color.toLowerCase()];
        var marker=$("markerColor");
         
        if(!marker)
        {
          marker=document.createElement('div');
          marker.id="markerColor";
          marker.style.position='absolute';
          marker.style.border="2px solid white";
          marker.style.width ="10px";
          marker.style.height="10px";        
          $('colors').appendChild(marker);
        }
        marker.style.display='block';
        marker.style.top=ob.offsetTop-2+'px';
        marker.style.left=ob.offsetLeft-2+'px';
    }
    else
    {        
      var marker=$("markerColor");         
        if(marker)        
        marker.style.display='none';
    }
  }    
  this.showLoading=function()
  {
  	$('load').style.display='block';
  	
  	if(!this.loading)
  	 this.doLoading();
  	this.loading=true;
  }
  this.doLoading=function()
  { 
  	var dots='.&nbsp;&nbsp;';
  	console.info('Dot',$('dots').innerHTML);
  	switch($('dots').innerHTML)
  	{
  		case '.&nbsp;&nbsp;':
  			dots='..&nbsp;';
  		break;	
  		case '..&nbsp;':
  			dots='...';	
  		break;
  		case '...':
  		 dots='&nbsp;&nbsp;&nbsp;';
  		 break;
  		  	 
  	}
  	$('dots').innerHTML=dots;
  	if(this.loading)
  	setTimeout('space.doLoading()',500);
  }
  this.hideLoading=function()
  {
  	this.loading=false;
  	$('load').style.display='none';
  }
  this.deleteBackground=function()
  {
      this.setBackgroundImage('');  
  }
  this.setBackgroundColor=function(color)
  { 
    color=parseColor(color);
    if(color)
    {
    this.bgColor=color;
    }
    else
    {
    this.bgColor='ccc';
    }
    if($('spaceEdit'))
   	 $('spaceEdit').style.backgroundColor='transparent';
    document.body.style.backgroundColor='#'+this.bgColor;
    this.setColorToOption(this.bgColor);
/*   for(ids in modules)
    {
     if(typeof  id == 'number' )
     modules[ids].setBordersRound();
    }*/
    return this.bgColor;
  }
  this.setBackgroundImage=function(file)
  {
    if(file)
    {
      var img=file.split(':');
      //todo: first loading image until img ist load than cache it
      //todo: additional option: fix image and resize to screensize
      document.body.style.backgroundAttachment='fixed';
    //  document.body.style.backgroundAttachment='fixed';
      document.body.style.backgroundImage='url(http://'+rotate(img[1])+'.'+content['config']['imgdomain']+'/backgroundspace/'+img[0]+')';    
      this.bgImage=file;
    }
    else
    {
    this.bgImage=''; 
    document.body.style.backgroundImage='none';
    }
  }
  this.setEventsTab=function(aTab,id)
  {    
    var ob=engine.object.getElementsByClass(aTab,'tabMore pngHack')[0];
  //  ob.style.border='2px solid red';
    engine.object.addEvent(aTab,'mouseover',function()
                                            {
                                            space.tabEditIsIn=1;
                                           // if(!engine.input.mouse.mousekey[0])
                                          //    space.getTabById(id).showEdit();
                                              
                                            }
                          );
    engine.object.addEvent(ob,'click',function()
                                            {
                                              space.tabEditIsIn=1;
                                               space.getTabById(id).showEdit();
                                            }
                          );      
                          
     engine.object.addEvent(aTab,'mouseup',function()
                                            {
                                              space.tabEditIsIn=1;
                                            }
                          );                                                   
    engine.object.addEvent(aTab,'mouseout',function(e)
                                          {

        space.tabToCheckId=id;
          setTimeout('space.checkIsOutOfTab()',200);
                                          }
                          );    
  
  
  }
  this.checkIsOutOfTab=function()
  {
     
     if(!engine.input.mouse.mousekey[0] && !engine.object.isIn($('tab'+space.tabToCheckId),-2))
     {
     space.tabEditIsIn=0;
     var tab=space.getTabById(space.tabToCheckId)
     if(tab)
    	 tab.hiddeEdit()
     }
  }
  this.addedTab=function(id,name)
  {
      this.tabModus=0;
      $('tabs').removeChild($('tabnew')); 
      if(id)
      {
        var data=new Array();
        data['TSecure']=0;
        var tab=this.loadTab(id,name,data);    //else echo error
        tab.loaded=1;
      }  
        
  }
  this.addTab=function()
  {
    if(!this.tabModus)
    {
      var aTab=document.createElement('div');    
      aTab.className="tab";
      aTab.id='tabnew';
      aTab.innerHTML='<form onsubmit="space.createTab(); return false;"><input id="tabnewinput"></form>';    
      $('tabs').appendChild(aTab);    
      $('tabnewinput').focus();
      $('addTabText').innerHTML='OK';
      $('addTab').className='tabGreen';
      this.tabModus=1;
      
      
    } 
    else
    {
      space.createTab();
    }
  }
  this.cancelCreateTab=function()
  {
      this.tabModus=0;
      $('tabs').removeChild($('tabnew'));   
      $('addTabText').innerHTML='+ Seite hinzufügen';      
      $('addTab').className='tab';        
  }
  this.createTab=function()
  {
    var name=$('tabnewinput').value;  //noch prüfen
    if(name.length)
    {
      $('addTabText').innerHTML='+ Seite hinzufügen';
      $('addTab').className='tab';
      $('tabnew').innerHTML='<img src="'+this.workingImg+'"  style="position:relative; top:4px; margin-right:2px;">'+name;
      engine.ajax.addRequest('/ajax.php?f=spoon/tabAdd&name='+name,function(text){space.addedTab(text,name)});
    }
    else
    {
      this.cancelCreateTab();
    }
    
  }
  this.getTabById=function(id)
  {
    return this.tabs[this.ids[id]];
  }
  this.getModuleById=function(id)
  {
 
    return modules[id];
  }  
  this.setData=function(data)
  {
   this.writeSpace.innerHTML=data;
  }
        
  this.saveOrder=function()
  {
     var tabs=$('tabs').childNodes;
     var order='';
     for(var i=tabs.length;i;i--)
     {
        order+=','+tabs[i-1].id.substr(3);
     }      
     engine.ajax.addRequest('/ajax.php?&f=spoon/tabOrder&order='+order.substr(1),
     function(text){});
     
  }      
  this.hiddeORshowEdit=function()
  {
    var hide=$('arrowHide');
    if(hide.style.display=='none')
    {
      hide.style.display='block';
      $('arrow').className='topContBottomUp';    
      $('top').style.height='145px';
    }
    else
    {
      hide.style.display='none';
      $('arrow').className='topContBottomDown';    
      $('top').style.height='27px';      
    }
  }
  
  this.getModuleClassById=function(id)
  {
    return modules[id].moduleClass;
  }
  this.setSize=function(ob) //todo: review
  {
  
  	if(this.height<ob.offsetHeight+ob.offsetTop+100)
  	{
  		this.height=ob.offsetHeight+ob.offsetTop+100; 
  	this.writeSpace.style.height=this.height+'px';   	
  	//this.writeSpace.style.overflow='show';
		
  		//window.scrollTo(0, this.height-100); 
	}


  	
  }
}