/**
 * Background Core
 *
 * @author Philipp Franke <franke@inav.de>
 * @version $Id$
 * @copyright INAV Communication GmbH & Co. KG, 22 October, 2010
 * @package Javascript
 **/

var backgroundCore = new Class({
  Implements: [Options, Events],
  
  options: {
    height:   '100%',
    width:    '100%',
    position:   {
        'x':  'center',
        'y':  'center'
    },
    scale:    'proportion',
    scroll:   'none',
    repeat:   'none'
  },

  viewport:   null,
  background: null,
  img:        null,
  img_src:    null,
  img_width:  null,
  img_height: null,
  img_bg_width: null,
  img_bg_height: null,
  height:     null,
  width:      null,
  bg_color:   null,
  scale:      null,
  scroll:     null, 
  repeat:     null,
  position:   null,
  split:      1,
  
  initialize: function(background_id, img, viewport, options){    
    this.background = $('div_'+background_id);
    this.viewport   = $(viewport);
    this.img        = $(img.id);
    this.img_src    = img.src;
    this.img_width  = img.width;
    this.img_height = img.height;
    //this.img.removeProperties('width', 'height');
    this.setOptions(options);
    if(this.background.getStyle('height') != '100%' ) {
      this.split = 100 / this.background.getStyle('height').toInt();
    }
  },
  
  setFullscreen: function() {
    if(this.scale == 'proportion' || this.options.scale == 'proportion') {
      this.setBackgroundSize();
      //console.log(this.img_bg_height);
      this.img.setStyles({
        'width': this.img_bg_width,
        'height': this.img_bg_height 
      });
    }
  },
  
  setBackgroundSize: function() {    
    var windowAspectRation = (this.viewport.getScrollSize().x / this.viewport.getScrollSize().y * 100);
    var backgroundAspectRation = (this.img_width / this.img_height * 100);
    
    if (Math.floor(windowAspectRation)/100 >= Math.floor(backgroundAspectRation)/100) {
      this.img_bg_width = (this.viewport.getScrollSize().x) / this.split + 'px';
      this.img_bg_height = (this.viewport.getScrollSize().x * Math.pow((Math.floor(backgroundAspectRation)/100), -1))  / this.split + 'px' ;
      //console.log('fit height' + this.img_bg_height);
    
    } else {
      this.img_bg_height = this.viewport.getScrollSize().y  / this.split + 'px';
      this.img_bg_width = (this.viewport.getScrollSize().y * backgroundAspectRation/100) / this.split+ 'px' ;
      //console.log('fit width' +this.img_bg_width);      
    }
  },
  
  setImgPosition: function() {
    if(this.position == null) {
      position = this.options.position;
    }
    else {
      position = this.position;
    }
    if(position.x == 'center' || position.x == '50%') {
      var left = '50%';
      var right = 'auto';
      var margin_left = '-' + this.img_bg_width.toInt()/2 + 'px';
    }
    else if(position.x == 'left' || position.x.toInt() == 0) {
      var left = 0
      var right = 'auto';
      var margin_left = 0;
    }
    else if(position.x == 'right' || position.x == '100%') {
      var left = 'auto';
      var right = 0;
      var margin_left = 0;
    }
    else {
      var left = position.x;
      var margin_left = '-' + this.img_bg_width.toInt()/2 + 'px';
    }
    
    
    if(position.y == 'center' || position.y == '50%') {
      
      var top = '50%';
      var bottom = 'auto';
      var margin_top = '-' + this.img_bg_height.toInt()/2 + 'px';
    }
    else if(position.y == 'top' || position.y.toInt() == 0) {
      var top = 0
      var bottom = 'auto';
      var margin_top = '0';
    }
    else if(position.y == 'bottom' || position.y == '100%') {
    
      var top = 'auto';
      var bottom = 0;
      var margin_top = '0';
    }
    else {
      var top = position.y;
      var margin_top = '-' + this.img_bg_height.toInt()/2 + 'px';
    }
        
    this.img.setStyles({
      'left':   left,
      'right':  right,
      'bottom': bottom,
      'top':    top,
      'margin-left': margin_left,
      'margin-top': margin_top
    });
  },
  
  resizable: function() {
    window.addEvent('resize', function(){
      this.setFullscreen();
      this.setImgPosition();
    }.bind(this));
  },
  
  showBg: function(id) {
     $(id).set('tween', {duration: 'normal'});
     $(id).tween('opacity','0', '1');
  },
  
  hideBg: function(id) {
    $(id).set('tween', {duration: 'normal'});
     $(id).tween('opacity','1', '0');
  }
})