var pic = 'pic';
var picboundary = 'pic-boundary';
var slider = 'slider';
var handle = 'handle';
var finishw = 1100; // fill this server side
var finishh = 1100; // fill this server side
var startw = 265; // this matches the starting css
var starth = 265; // this matches the starting css
var aspect = startw/starth;
var mySlider;
var heldevent = 0;
var stepamount = 50; // how far it should go on click
window.addEvent('load',function(){
  var whatadrag = new Drag.Move(pic,{
    onComplete: function() {
      stayindadgummit();
    }
  }); 
  var boundarycoords = $(picboundary).getCoordinates();
  mySlider = new Slider(slider, handle, {
    range: [startw,finishw], 
    wheel: true, 
    onChange: function(step) {
      var oldtop = $(pic).getStyle('top').toInt();
      var oldleft = $(pic).getStyle('left').toInt();
      var oldwidth = $(pic).getStyle('width').toInt();
      var oldheight = $(pic).getStyle('height').toInt(); 

//alert(oldheight);
      $(pic).setStyles({width:step,height:step*aspect});
      recenter(oldtop,oldleft,oldwidth,oldheight);
      stayindadgummit();
    },
    onComplete: function() {
      stayindadgummit();
    }
  });
  mySlider.set(300); // problem with stepcurrent line...this placates it
  $$('.zoom-button').forEach(function(item,i) {
    item.addEvent('mousedown',function() {
      var stepcurrent = (mySlider.step>stepamount) ? mySlider.step : stepamount;
      var inrout = (item.hasClass('out')) ? stepcurrent-stepamount : stepcurrent+stepamount;
      mySlider.set(inrout);
      heldevent = (item.hasClass('out')) ? 'out' : 'in';
      repeatmyslider();
    });
    item.addEvent('mouseup',function() {
      heldevent = 0;
    });
  });
  $$('.zoompic-thumb').forEach(function(item,i) {
    item.addEvent('click',function() {
      var newsrc = item.getProperty('alt');
      $(pic).set('src',newsrc);
    });
  });
});
function repeatmyslider() {
  if (heldevent!=0) {
    var stepcurrent = mySlider.step;
    var inrout = (heldevent=='out') ? stepcurrent-stepamount/10 : stepcurrent+stepamount/10;
    mySlider.set(inrout);
    setTimeout('repeatmyslider()',10);
  }
}
function recenter(oldtop,oldleft,oldwidth,oldheight) {
  // how big are we now?
  var newtop = $(pic).getStyle('top').toInt();
  var newheight = $(pic).getStyle('height').toInt();

  var newleft = $(pic).getStyle('left').toInt();
  var newwidth = $(pic).getStyle('width').toInt();

  window.status = oldtop+' '+newtop+' '+oldheight+' '+newheight;
  var changetop = oldtop-((newheight-oldheight)/2).toInt();
  var changeleft = oldleft-((newwidth-oldwidth)/2).toInt();
  $(pic).setStyles({top:changetop,left:changeleft});
}
function stayindadgummit() {
  // how big ar we now?
  var newtop = $(pic).getStyle('top').toInt();
  var newleft = $(pic).getStyle('left').toInt();
  var newwidth = $(pic).getStyle('width').toInt();
  var newheight = $(pic).getStyle('height').toInt();
  var newright = newleft+newwidth;
  var newbottom = newtop+newheight;
  // don't let it be pulled off the top border
  if (newtop>0) $(pic).setStyle('top',0);
  // don't let it be pulled off the left border
  if (newleft>0) $(pic).setStyle('left',0);
  // keeping the right border is a bit more difficult
  if (newright<startw) {
    var curleft = $(pic).getStyle('left').toInt();
    var newleftrightfix = startw-newright+curleft;
    $(pic).setStyle('left',newleftrightfix);
    //window.status = curleft+' '+startw+' '+newright+' '+newleftrightfix; 
  }
  // keeping the bottom border is a bit more difficult, too
  if (newbottom<startw) {
    var curtop = $(pic).getStyle('top').toInt();
    var newtopbottomfix = startw-newbottom+curtop;
    $(pic).setStyle('top',newtopbottomfix);
    //window.status = curtop+' '+startw+' '+newbottom+' '+newtopbottomfix; 
  }

}