/**
 * This class is intended to call a visitors attention to one element (e.g. a 
 * header graphic). After having captured the visitors attention the element 
 * reduces its appearance to further conduct the readers interest to other
 * site contents. For the visitors convenience the header state is stored in a 
 * cookie. The element is just focused to in case the cookie is absent. For 
 * testing purpos the elements cookie might be erased by pressing the shift
 * key while clicking on to the control element. Through the CSS styles 
 * focuspanel, focuspanel-small and focuspanel-big the control elements visual
 * aspect might be adjusted. 
 * 
 * @author Roman Buechler
 * @version 1.0.0
 * @license MIT-Style License (http://mootools.net/license.txt) 
 * @copyright Synac Technology, S.L. (http://www.synac.com)  
 * @requires Core,Browser,Array,Function,Hash,String,Number,Event,Class,Class.Extras,Element,Element.Event,Element.Style,Cookie,Fx,Fx.CSS,Fx.Tween
 *    
 */   
var CSynFocusPanel = new Class({
  
  Implements: Options,
  
	Panel: null,
	Control: null,
	Tween: null,
	state: null,
	cookieName: '',
  
  options: {
		property: 'height',
		bigValue: 280,
		smallValue: 150,
		delay: 4000,
		duration: 1000,
		cookieLifeTime: 30,
		aAuxId: ['nav','mainwrap','footer']
	},
	
	showBigPanel: function(){
    this.Tween.start(this.options.bigValue);
  },
  
  showSmallPanel: function(){
    this.Tween.start(this.options.smallValue);
  },
  
  deleteCookie: function(){
    this.setState(-1);
    Cookie.dispose(this.cookieName);  
    alert('Cookie deleted.');
  },
	
	controlClick: function(event){
	  if(event.shift===true){
      this.deleteCookie();
    } else {
      if(this.state==0) this.showBigPanel();
      if(this.state==1) this.showSmallPanel();
    };
  },
	
	setControl: function(){
    if(!$chk(this.Control)){
      this.Control = new Element('div',{
        'class': 'focuspanel'
      });
      this.Control.inject(this.Panel,'top');
      this.Control.addEvent('click',this.controlClick.bind(this));
    };
  },
  
  setState: function(state){
    this.state = state;
    if($chk(state)){
      Cookie.write(this.cookieName,state,{
        path: '/',
        duration: this.options.cookieLifeTime
      });
      if(state==0){
        this.Control.removeClass('focuspanel-big');
        this.Control.addClass('focuspanel-small');
        this.Panel.setStyle(this.options.property,this.options.smallValue);
      };
      if(state==1){
        this.Control.removeClass('focuspanel-small');
        this.Control.addClass('focuspanel-big');
        this.Panel.setStyle(this.options.property,this.options.bigValue);
      };
    };
  },
	
	tweenComplete: function(){
    var propertyName = this.options.property;
    var propertyVal = this.Panel.getStyle(propertyName).toInt();
    if(propertyVal == this.options.smallValue){
      this.setState(0);
    };
    if(propertyVal == this.options.bigValue){
      this.setState(1);
    };
    this.setControl();
    this.auxTweenComplete();
  },
  
  initialize: function(panelId,options){
    this.Panel = $(panelId), 
    this.cookieName = 'synfocuspanel-' + this.Panel.get('id');
    this.setOptions(options); 
    
    this.setControl();
    
    this.Tween = new Fx.Tween(this.Panel,{
      property: this.options.property,
      duration: this.options.duration,
      onComplete: this.tweenComplete.bind(this)
    });
    
    this.setState(Cookie.read(this.cookieName));
    if(!$chk(this.state) || this.state==-1){
      this.Panel.setStyle(this.options.property,this.options.bigValue);
      this.Tween.start.delay(this.options.delay,this.Tween,this.options.smallValue);
    };
    
    var pageMargins = $('page_margins');
    pageMargins.setStyle('display','block');
    this.auxInitialize();
  },
  
  auxInitialize: function(){
    if((!$chk(this.state) || this.state==-1) && this.options.aAuxId.length>0){
      this.options.aAuxId.each(function(auxId){
        $(auxId).setStyle('display','none'); 
        $(auxId).setStyle('opacity',0); 
      });
    }
  },
  
  auxTweenComplete: function(){
    if(this.options.aAuxId.length>0){
      this.options.aAuxId.each(function(auxId){
        $(auxId).setStyle('display','block');
        $(auxId).tween('opacity',1);
      });
    };
  }

});