function mi_scroll_y(scroll_step) {
        scroll_size = this.getScrollSize();
        scroll_now = this.getScroll().y;
        //$(this.id + '_percent').set('text', Math.ceil(100*scroll_now/(scroll_size.y - this.getSize().y)) +'%');
        $(this.id + '_percent').setStyle('height', Math.ceil(100*scroll_now/(scroll_size.y - this.getSize().y)) +'%');
        if ((scroll_now <= scroll_size.y) && (scroll_now >= 0) ){
          this.scrollTo(0, scroll_now + scroll_step); 
        };
    };
    
    function domready_brand_scroll() {
     $('scroll_down').addEvents({
        'mouseenter': function() {
            flip_image(this);
            $('brandContent').store('timer_scroll', mi_scroll_y.periodical(g_scroll_speed, $('brandContent') , g_scroll_step_value) );
          },
        'mouseleave': function() {
          flip_image(this);
          if ( $('brandContent').retrieve('timer_scroll') != null) {
            $clear( $('brandContent').retrieve('timer_scroll') );
          };
        },
        'click': function(event) {
          event.stop();
          if ( $('brandContent').retrieve('timer_scroll') != null) {
            $clear( $('brandContent').retrieve('timer_scroll') );
          };
          //mi_scroll_y.run($('brandContent').getSize().y - g_scroll_step_value*3,  $('brandContent')); 
          mi_scroll_y.run($('brandContent').getSize().y - g_scroll_step_value*3,  $('brandContent'));
        }
    });

    $('scroll_up').addEvents({
        'mouseenter': function() {
          flip_image(this);;
            $('brandContent').store('timer_scroll', mi_scroll_y.periodical(g_scroll_speed, $('brandContent'), 0 - g_scroll_step_value) );
          },
        'mouseleave': function() {
          flip_image(this);
          if ( $('brandContent').retrieve('timer_scroll') != null) {
            $clear( $('brandContent').retrieve('timer_scroll') );
          };
        },
        'click': function(event) {
          event.stop();
          if ( $('brandContent').retrieve('timer_scroll') != null) {
            $clear( $('brandContent').retrieve('timer_scroll') );
          };        
          mi_scroll_y.run( 0 - $('brandContent').getSize().y + g_scroll_step_value*3, $('brandContent')); 
        }
        
    });
/*        
    $('scroll_top').addEvent(
        'click', function() {
          $('brandContent').scrollTo(0,0);
        }
    ); 
    $('scroll_bottom').addEvent(
        'click', function() {
          $('brandContent').scrollTo(0, $('brandContent').getScrollSize().y);
        }
    );
*/     
}

function pickBrand_mouse(){
  //delay the response of mouseover
  if ($defined(g_event_pick_brand)) {
    g_event_pick_brand = $clear(g_event_pick_brand);
  } else {
    var fun_event_pick_brand = function(){   pickBrand_focus(); };
    g_event_pick_brand = fun_event_pick_brand.delay(g_event_mouseover_delay);    
  };
  
}

function pickBrand_focus(){
  var fun_manufacturers_expand = function() {
     if ($('manufacturers_id').length >1 ) {
        select_drop('manufacturers_id', 20);
     };
     $('manufacturers_id').addEvents({
        //use custom event, do not use mouseover
        'mouseenter': function(){
            if (this.retrieve('timer_drop') == null) {
              var fun_drop = function() { select_drop('manufacturers_id', 20); };
              //delay response and store it for clear
              this.store('timer_drop', fun_drop.delay(g_event_mouseover_delay));
            };
          },
        'mouseleave': function(){
              if (this.retrieve('timer_drop') != null) {
                this.store('timer_drop', $clear(this.retrieve('timer_drop')));
              }; 
              $('manufacturers_id').size =1;
               
            },
        'click': function(event) {
              event.preventDefault(); //prevent the default action of browser
        }
                });
   };
   ele_htm_from_url('pickBrandModel', g_url_root + '/mi_ajax.php' 
    , 'want=brand', fun_manufacturers_expand);
}
function pickBrand_onchange(manufacturers_id){
  $('manufacturers_id').size = 1;
  var fun_pickModel_products_id_expand = function(){
    if ($('pickModel_products_id').length >1) {
      select_drop('pickModel_products_id', 20);
    };
    $('pickModel_products_id').addEvents({
      'mouseleave': function(){
          $('pickModel_products_id').size =1 ;
      },
      'mouseenter': function() {
          select_drop('pickModel_products_id',20);
      }
    });    
  }
  ele_htm_from_url('pickModel_content', g_url_root + '/mi_ajax.php',
    'want=model\&manufacturers_id=' + manufacturers_id, fun_pickModel_products_id_expand);
}
function pickModel_onchange(pickModel_form) {
  //$('pickModel_cPath').value= '4_2';
  var req = new Request({
    url: g_url_root + '/mi_ajax.php',
    data: 'want=cPath\&products_id=' + $('pickModel_products_id').value,
    method: 'get',
    onComplete: function(got_text) {
      $('pickModel_cPath').value = got_text;
      pickModel_form.submit();      
    },    
    onFailure: function() {
			$('pickModel_cPath').value = 2;
		}
	});
  req.send();  
}

function order_peep(orders_id) {
  // do nothing if already ajaxed, because removeEvents is not working
  if ($('order_peep_' + orders_id).retrieve('loaded')) return true;
  
  $('order_peep_content_' + orders_id).set('html', 
        '<img style="text-align:center;" src="' + g_url_template_image + 'saveu_loading.gif" alt="loading">');
  var fun_order_peep_complete= function(){
//    $('order_peep_' + orders_id).store('background-color', $('order_peep_' + orders_id).getStyle('background-color'));
//    $('order_peep_' + orders_id).setStyle('background-color', 'yellow');
      element_toggle_show('order_peep_content_' + orders_id);        
    $('order_peep_' + orders_id).store('loaded', true);
    $('order_peep_' + orders_id).removeEvents('click'); //not working in embedded onClick in firefox
    $('order_peep_' + orders_id).addEvent('click', function(){
      element_toggle_show('order_peep_content_' + orders_id);
    /*  
      $('order_peep_' + orders_id).toggleClass('up_border');
      if ($('order_peep_' + orders_id).getStyle('background-color') == 'yellow') {
        $('order_peep_' + orders_id).setStyle('background-color', $('order_peep_' + orders_id).retrieve('background-color'));
      }else {
        $('order_peep_' + orders_id).setStyle('background-color', 'yellow');      
      };
    */      
    });
  };
  ele_htm_from_url('order_peep_content_'+ orders_id, g_url_root + '/mi_ajax_customer.php'
    ,'want=order_peep\&order_id=' + orders_id, fun_order_peep_complete);
}

/**
 * common functions
 *
 *
 */   

//replace image src to 'XOR of the char before dot(extension name)'
//example: search0.gif become search1.gif
function flip_image(obj_ele) {
  ori_src = obj_ele.src;
  dot_pos = ori_src.lastIndexOf('.');
  new_char = (ori_src.substr(dot_pos-1, 1) == '0')? '1' : '0'; 
  obj_ele.src = ori_src.substring(0, dot_pos-1) + new_char + ori_src.substring(dot_pos);
//  alert('ori_src =' + ori_src + '\nnew_src=' + new_src + "\n");
}
function select_drop(id_select, select_max_size){
    if ($(id_select).length >1) {
      $(id_select).size = ($(id_select).length > select_max_size) ? select_max_size : $(id_select).length;
    };
}
function ele_htm_from_url(element_id, req_url, parameter, complete_act) {
  //alert('req_url=' + req_url);
  var mel;
  if ($type(element_id) == 'string') {
    mel = $(element_id);
  } else {
    mel = element_id;
  };
  
  if ($type(mel) != 'element') {
    return false;
  };
//  alert('going to make req object\n' + mel.get('id') + '\n' + req_url + '\nparameter=' + parameter);
  var req = new Request({
    url: req_url,
    data: parameter,
    method: 'get',
    onComplete: function(got_text) {
      if (Browser.Engine.trident) {
        got_text = got_text.replace('&amp;','&');
      };    
      mel.set('html', got_text);
      
      if (complete_act != '') {
        switch($type(complete_act)) {
          case 'string':
              $(complete_act).focus();
              break;
          case 'function':
              //alert('is function');
              complete_act();
              break;
          default:
              break;        
        };//end switch
      }; //end if ele_focus
    },    
    onFailure: function() {
			mel.set('text', 'Failed to get Content');
		}
	});
  req.send();
};
//------------------------------------------------------------------------------ 
  function element_toggle_show(element_id) {
    var mel_in = (typeof(element_id) == 'string') ? $(element_id): element_id ;
    if (mel_in.getStyle('display') == 'none') {
      mel_in.setStyles({
        visibility: 'visible',
        display: 'block'
      });  
    } else {
      mel_in.setStyles({
        visibility: 'hidden',
        display: 'none'
      });
    };    
  } 
  function element_hide(element_id){
    if (typeof(element_id) == 'string') {
      var mel_in = $(element_id);
    } else {
      var mel_in = element_id;
    };
    mel_in.setStyles({
      visibility: 'hidden',
      display: 'none'
    });
  };

  function element_show(element_id){
    if (typeof(element_id) == 'string') {
      var mel_in = $(element_id);
    } else {
      var mel_in = element_id;
    };
    mel_in.setStyles({
      visibility: 'visible',
      display: 'block'
    });  
//    var tmp = document.getElementById(element_id);
//      tmp.style.visibility='visible';
//      tmp.style.display='block';
  };
  
  function show_position(element_id) {
  
    var ele = $(element_id);
    var pos = ele.getPosition();
    var size = ele.getSize();
    alert('posion' + "\n"
            + 'x=' + pos.x + "\n"
            + 'y=' + pos.y + "\n"
            + 'width=' + size.x + "\n"
            + 'height=' + size.y + "\n"
      );

  }