function hyper_banner(id, r)
{
 var self = this;
 
 // initial setup
 
 this.container_id = id;
 
 //this.ratio = 0.5; // let me just drop it here for a while...
 
 this.ratio = r;

 this.banners_num = $("#"+this.container_id).children().length;
 
/*
 this.titles = [];
 this.colors = [];
*/
 $("#"+this.container_id).addClass("hprb-container");
 
 for (i=0; i < this.banners_num; i++)
 {
  $("#"+this.container_id).children().eq(i).prop("id","hprb"+i);
  $("#"+this.container_id).children().eq(i).addClass("hprb-slide");
/*
  this.titles[i] = $("#hprb"+i+" img").attr("title");
  
  this.colors[i] = "#"+$("#hbc"+i).val();
  
  $("#hprb"+i+" img").attr("title", "");
*/
 // alert(this.titles[i]);
 }
 
/*
 foo = '<div id="hprb_title">Споживчі кредити!<span>Без застави та поруки!!</span><div>Замовити!!!</div></div>';
 $("#"+this.container_id).append(foo);
 
 $("#hprb_title").css("color",self.colors[0]);
 $("#hprb_title").html(this.titles[0]);
*/
 /* define methods */

 this.rebuild = function()
 {
  self.idle = false;
  self.timer = -1;
  
  self.top_banner = 0;
  self.pre_top = 0;
  self.z = [];
/*
  $("#hprb_title").css("color",self.colors[0]);
  $("#hprb_title").html(self.titles[0]);
*/
  var i, zet=700; // 10000
 
  for (i=0; i < self.banners_num; i++)
  {
   self.z[i] = zet;
   zet = zet - 10;
   
   
   $("#hprb"+i).css("display", "block");
   
  }
 }
 
 this.ajust_size = function()
 {
  self.container_width = $("#"+self.container_id).width();
  
//alert(self.container_width);
  
  self.container_height = Math.floor( self.container_width * self.ratio ); 
  
  $("#"+self.container_id).css("height", self.container_height+"px");
  
  /* reserved for future usage
  self.bigger_width = Math.ceil(self.container_width*1.33);
  self.bigger_height = Math.ceil(self.container_height*1.33);
  self.dx = Math.floor(0.165*self.container_width);
  self.dy = Math.floor(0.165*self.container_height);
  */
  
  // actual resizing of slides
  
  for (i=0; i < this.banners_num; i++)
  {
   $("#"+self.container_id).children().eq(i).css("width", self.container_width+"px");
   $("#"+self.container_id).children().eq(i).css("height", self.container_height+"px");
   /*
   $("#"+self.container_id).children().eq(i).css("width", self.bigger_width+"px");
   $("#"+self.container_id).children().eq(i).css("height", self.bigger_height+"px");
   $("#"+self.container_id).children().eq(i).css("left", "-"+self.dx+"px");
   $("#"+self.container_id).children().eq(i).css("top", "-"+self.dy+"px");
   */
  }
  
  // actual resizing of the dots panel

  // $("#hprb-dots").css("width", self.container_width+"px");
  // $("#wk_karusel_holder").css("width", self.container_width+"px");
  
 } // end ajust_size()
 
 this.reset_size = function()
 {
  self.idle = false;
  
  if (self.timer != -1)
  {
   clearTimeout(self.timer);
   self.timer = -1;
  }
  
  ///self.ajust_size();
  
  // now restart 
  self.proceed();
 }

/* 
 this.dot_onclick = function(event)
 {
//alert(event.data.num);
  
  if (self.top_banner != event.data.num)
  {
   self.pre_top = self.top_banner;
   
   var i, shuffles;
   
   if (self.top_banner < event.data.num)
   {
    shuffles = event.data.num - self.top_banner;
   }
   else
   {
    shuffles = self.banners_num - (self.top_banner - event.data.num);
   }
   
//alert(shuffles+" shuffling(s) needed!");
   
   for (i=0; i < shuffles; i++)
   {
    self.do_shuffle();
   }
  
   self.proceed(); 
  }
 }

 this.add_dots = function()
 {
  if (self.banners_num > 1)
  {
   var i, foo = '<div id="hprb-dots"><span id="hprb-dots-in"><!--'
            +'--><a href="javascript:{void(0);}" class="hprb-active"></a><!--';
   for (i=1; i < self.banners_num; i++)
   {
    foo = foo + '--><a href="javascript:{void(0);}"></a><!--';
   }
   
   foo = foo +'--></span></div>';

   $("#"+self.container_id).append(foo);
   
   for (i=0; i < self.banners_num; i++)
   {
    $("#hprb-dots-in").children().eq(i).on("click", {num: i}, self.dot_onclick);
   }
  }
 }
 
 this.highlite_dot = function()
 {
  if (self.banners_num > 1)
  {
   $("#hprb-dots-in").children().eq(self.pre_top).removeClass("hprb-active");
   $("#hprb-dots-in").children().eq(self.top_banner).addClass("hprb-active");
  }
 }
*/

 this.do_shuffle = function()
 {
  var foo, i;

  foo = self.z[self.banners_num-1];
  
  for (i=self.banners_num-1; i > 0 ; i--)
  {
   self.z[i] = self.z[i-1];
  }
  
  self.z[0] = foo;
 
  if (self.top_banner == self.banners_num-1)
  {
   self.top_banner = 0;
  }
  else
  {
   self.top_banner = self.top_banner + 1;
  }
  
  // $("#hprb_title").css("color",self.colors[self.top_banner]);
  // $("#hprb_title").html(self.titles[self.top_banner]);
 } // end do_shuffle()

 
 this.shuffle = function()
 {
  self.pre_top = self.top_banner;
  self.do_shuffle();
 } // end shuffle()
 
 this.apply = function()
 {
  var i;

  for (i=0; i < self.banners_num; i++)
  {
   $("#hprb"+i).css("zIndex", self.z[i]);
  }
 } // end apply()
 
 this.prepare = function()
 {
//alert("#hb"+self.pre_top+" show");
  $("#hprb"+self.pre_top).css("opacity", 100);
  $("#hprb"+self.pre_top).css("display", "block");
  $("#hprb"+self.pre_top).css("width", self.container_width+"px");
  $("#hprb"+self.pre_top).css("height", self.container_height+"px");
  $("#hprb"+self.pre_top).css("left", "0px");
  $("#hprb"+self.pre_top).css("top", "0px");
/*
  $("#hprb"+self.pre_top).css("transition", "none");
  $("#hprb"+self.pre_top).css("-moz-transition", "none");
  $("#hprb"+self.pre_top).css("-o-transition", "none");
  $("#hprb"+self.pre_top).css("-webkit-transition", "none");
*/
  $("#hprb"+self.pre_top).css("transform", "none");
  $("#hprb"+self.pre_top).css("-moz-transform", "none");
  $("#hprb"+self.pre_top).css("-ms-transform", "none");
  $("#hprb"+self.pre_top).css("-o-transform", "none");
  $("#hprb"+self.pre_top).css("-webkit-transform", "none");
 }
 
 this.proceed = function()
 {
  self.apply();
  //self.highlite_dot();
  self.prepare();
  self.idle = true;
  
  self.push_ahead();
  //self.zoom_out();
 } // end proceed()

 
 this.cycle_slides = function()
 {
  self.shuffle();
  self.proceed(); 
 } // end cycle_slides()
/*
 this.zoom_out = function()
 {
  if (self.idle)
  {
   // setTimeout(self.push_ahead, 3000); // for demo
   
   $("#hprb"+self.top_banner).transition({ translate:[-1,-1], 
                           scale: 0.752 ,
					       duration:3000,
					       easing:"linear",
						   complete: self.push_ahead });
  }
 } // end zoom_out()
*/
 this.fade_top = function()
 {
//alert("#hb"+self.top_banner+" fade");
  self.idle = false;
  clearTimeout(self.timer);
  self.timer = -1;
  $("#hprb"+self.top_banner).fadeOut("slow", self.cycle_slides);
 }
 
 this.push_ahead = function()
 {
//alert("in push idle="+self.idle+" timer="+self.timer);
   if (!self.idle)
   {
    return;
   }
   
   if (self.timer != -1)
   {
    clearTimeout(self.timer);
   }

   self.timer = setTimeout(self.fade_top,15000);
   
   self.idle = true;
 } // end of push_ahead();
 
 /* restart banner */
 
 this.rebuild();
//alert('1');
 this.apply();
//alert('2');
 //this.add_dots();
 ///this.ajust_size();
 this.idle = true;
 this.push_ahead();
 
} // end hyper_banner()