function substr( f_string, f_start, f_length ) {  
  if(f_start < 0) {
    f_start += f_string.length;
  }

  if(f_length == undefined) {
    f_length = f_string.length;
  } else if(f_length < 0){
    f_length += f_string.length;
  } else {
    f_length += f_start;
  }

  if(f_length < f_start) {
    f_length = f_start;
  }

  return f_string.substring(f_start, f_length);
}

window.addEvent('domready', function(){
  var periodical, periodical1, periodical2, periodical3, periodical_list;
  var preview = $('preview');
  var bar = $('long-bar');
  var slides = $('slides');
  var preImg = prevX = prevA = null;
  var count_item = 0;
  if (preview) {
    preImg = preview.getChildren('a')[0].getChildren('img');
    prevA = preview.getChildren('a')[0];
    var prevX = new Fx.Tween(preview, {duration:1000, wait:false});        
  }
  if (bar) {
    var count_item = bar.getChildren('div.item').length;
  }

  new Element('img', {
    'src': 'images/load.png'
  })

  var _width_slide = 168;

  var current = 0;
  var larr = $('larr');
  var rarr = $('rarr');

  var loader = (function(on, index){
    var loader = null;
    if (index) {
      loader = $('loader' + index);
    } else {
      loader = $('loader');
    }


    var roll_pos = 0;
    var count_roll = 8;
    var roll_size = 16;    
    /*
    _x -= __left; 
    _y -= __top;
    */
    if (on == 0) {
      $clear(periodical, periodical1, periodical2, periodical3);
      loader.setStyle('display', 'none');
    } else {
      loader.setStyle('background-position', '0px 0px');
      var roll = (function(){        
        if (roll_pos >= count_roll - 1) {
          loader.setStyle('background-position', '0px 0px');
          roll_pos = 0;
        } else {          
          loader.setStyle('background-position', -1 * (roll_size*roll_pos) +'px 0px');
          roll_pos++;
        }
      });

      if (index == 1) {
        $clear(periodical1); 
        periodical1 = roll.periodical(80, this);  
      } else if (index == 2){
        $clear(periodical2); 
        periodical2 = roll.periodical(80, this);  
      } else if (index == 3){
        $clear(periodical3); 
        periodical3 = roll.periodical(80, this);  
      } else {
        $clear(periodical); 
        periodical = roll.periodical(80, this);
      }      


      loader.setStyles({
        'display': 'block'
      });
    }
  });

  $$('#menu li a.din').addEvent('click', function(e){
    e.stop();
    var sub = this.getParent().getChildren('ul.sub')[0];
    if (sub) {
      if (sub.getStyle('display') == 'none') {
        $$('#menu li').each(function(el){
          var _sub = el.getChildren('ul.sub');
          _sub.setStyle('display','none');
        });
        sub.setStyle('display','block');
      } else {
        // sub.setStyle('display','none');
        $$('#menu li').each(function(el){
          var _sub = el.getChildren('ul.sub');
          _sub.setStyle('display','none');
        });
      }
    }
  });


  $$('#long-bar .item a').addEvent('click', function(e){
    e.stop();
    // alert('click');
    var src = this.get('href');
    var caption = this.getChildren('img')[0].get('title');
    if (Browser.Engine.trident) {
      src += '?r='+ Math.random();
    }   
    var rel = this.get('rel');
    var change_photo = (function(img){
      //alert(preview);
      prevX.start('opacity', 1, 0).chain(function(){
        //_this.addClass('hide');      
        // origX.start('opacity', 0, 1);                  
        preImg.set('src', src);
        if (caption) {
          $('caption').set('text', caption);  
        } else {
          $('caption').set('html', '&#160;');
        }        
        prevA.set('href', rel);
        prevX.start('opacity', 0, 1);
      });
      loader(0);
    });
    loader(1);
    var preview = new Element('img', {
      'src': src,
      'events': {
        'load':  function() {
          change_photo(this);
        }
      }
    });
  });

  if (larr) {
    larr.addEvent('click', function(){
      if (current - 1 <= 0) {
        this.setStyle('display', 'none');
      }
      rarr.setStyle('display', 'block');
      if (current > 0) current--;
      var _left = current * _width_slide * -1;
      var _pos_left = ((-1 * _left) * 787) / ((count_item-5) * _width_slide);
      $('pos').setStyle('left', _pos_left);
      bar.setStyle('left', _left);
    });
  }

  if (rarr) {
    rarr.addEvent('click', function(){
      if (current + 6 >= count_item) {
        this.setStyle('display', 'none');        
      }
      larr.setStyle('display', 'block');
      current++;
      var _left = current * _width_slide * -1;
      var _pos_left = ((-1 * _left) * 787) / ((count_item-5) * _width_slide);
      $('pos').setStyle('left', _pos_left);
      bar.setStyle('left', _left);
    });
  }

  if (preview && count_item > 5) {
    var mySlider = new Slider('scroll', 'pos', {
      range: [0, 784],  // 787
      // steps: count_item, // 787
      offset: 0,
      wheel: true,
      snap: true,
      onTick: function(pos){
        //this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
        // console.log(current);
      },
      onComplete: function(){
        // console.log(current);
      },
      onChange: function(){
        var _max = 784;  
        var _left = substr($('pos').getStyle('left'), 0, -2);
        var all_width = (count_item - 5) * _width_slide;
        var new_left = -1 * (all_width * _left) / _max;        
        var _temp = Math.ceil(((count_item - 5) * _left) / _max);
        current = (_temp <= 0) ? 0 : (_temp - 1);
        bar.setStyle('left', new_left);
        if (_left >= _max) {
          rarr.setStyle('display','none');
        } else {
          rarr.setStyle('display','block');
        }
        if (_left == 0) {
          larr.setStyle('display','none');
        } else {
          larr.setStyle('display','block');
        }
        // console.log(_left, all_width, new_left);
        // console.log(current);
        // this.element.tween('border').start('#000');
      }
    });
  }

  if (slides) {

    $$('div.jaw').set('opacity', 0.5);    

    var load_slide = (function(ind, src){
      var id_img = "slide_"+ ind + "";
      var slide = $(id_img);
      var prevX = new Fx.Tween(slide, {duration:1000, wait:false});
      prevX.start('opacity', 1, 0).chain(function(){                
        slide.set('src', src);
        prevX.start('opacity', 0, 1);
      });
      loader(0, ind);        
    });

    var change_slide = (function(){
      var roll = new Array();
      var i = 1;
      for (i=1; i<=3; i++) {
        (function(i){
          roll[i] = i;
          var pos = $("slide_id"+ (i)).get('value');
          pos = (pos == "3") ? 1 : ++pos;
          $("slide_id"+ (i)).set('value', pos);
          var src = "/images/slide_"+ (i) +"_" + pos + ".jpg";
          if (Browser.Engine.trident) {
            src += '?r='+ Math.random();
          }
          loader(1, i);
          var preview = new Element('img', {
            'src': src,
            'events': {
              'load':  function() {
                load_slide(roll[i], src);
              }
            }
          });
        })(i);
      }
    });

    $$('#slides .refresh').each(function(el,index){
      el.addEvent('click', function(){
        change_slide(); 
      });
    });

    var scroll = (function(){
      change_slide();    
    });    
    $clear(periodical_list); 
    periodical_list = scroll.periodical(10000, this);
  }


});