var wArr = new Array();
var aTO = false;
var curX = 0;
var endX = 0;
var curImg = 0;
var minX = -500;
var imgHolderW = 500;

var imgSpacing = 5;

if (navigator.userAgent.indexOf("Mobile") > -1)
 isMobile = true;
else
 isMobile = false;

var scrollBarW = 500;
var scrollBarHandleW = 36;
var scrollBarSpace = 500;
var scrollStartX = 0;
var scrollBarX = 0;
var scrollBarNew = 0;

var minH = 375;
var maxH = 648;
var diffH = maxH - minH;
//----- THESE JUST MEAN MIN (SMALL) AND MAX (LARGE) IMAGE STATE, NOT VALUE
var minY = -56;
var maxY = 0;
var diffY = maxY - minY;
var maxAlpha = 100;
var minAlpha = 10;
var alphaDiff = maxAlpha - minAlpha;

var imgArr = new Array();

function resizeIt() {
 if (window.innerWidth) {
  var iw = window.innerWidth;
 } else if (document.body.clientWidth) {
  var iw = document.body.clientWidth;
 }

 imgHolderW = iw - 450;
 if (imgHolderW < 890)
  imgHolderW = 890;
 document.getElementById('imgHolder').style.width = imgHolderW + 'px';
 document.getElementById('lgImgHolder').style.width = imgHolderW + 'px';

 minX = imgHolderW + totalW;

 if (curX < minX) {
  curX = Math.round((curX + minX + minX)/3)
  if (Math.abs(curX - minX) < 2 || tmpPerc > 99)
   curX = minX;

  document.getElementById('imgTable').style.left = curX + 'px';
  tmpX = curX;
  for (i=0;i<curImg;i++)
   tmpX += wArr[i] + imgSpacing;
 }

 scrollBarW = iw - (430 + 20 + w0);
 if (scrollBarW > imgHolderW)
  scrollBarW = imgHolderW - 98;
 else if (scrollBarW < minScrollBarW)
  scrollBarW = minScrollBarW;

 document.getElementById('scrollBar').style.width = scrollBarW + 'px';

 document.getElementById('scrollBarHandle').style.width = scrollBarHandleW + 'px';
 scrollBarSpace = scrollBarW - scrollBarHandleW;
 autoMoveScrollBar();
}




function autoMoveScrollBar() {
 if (curX > minX)
  tmpPerc = curX / minX;
 else
  tmpPerc = 1;

 scrollBarX = Math.round(tmpPerc * scrollBarSpace);
 document.getElementById('scrollBarHandle').style.left = scrollBarX + 'px';
}





function showImage(nm) {
 clearTimeout(aTO);

 curImg = nm;
 if (curImg >= totalImages) {
  curImg = 0;
  nm = 0;
 }

 endX = 0;
 for (i=0;i<nm;i++) {
  endX -= wArr[i] + imgSpacing;
 }

 tmpX = curX - endX;
 document.getElementById('lgImg').style.left = tmpX + 'px';
 document.getElementById('lgImg').width = wArr[nm];
 document.getElementById('lgImg').height = minH;
 document.getElementById('lgImg').style.top = minY+'px';
 document.getElementById('lgImg').src = imgArr[nm].src;

 document.getElementById('lgImgHolder').style.visibility = 'visible';
 document.getElementById('lgImg').style.visibility = 'visible';
 document.getElementById('arrowR').style.visibility = 'hidden';
 aTO = setTimeout('enlargeImage()', 50);
}

function enlargeImage() {
 clearTimeout(aTO);
 o = document.getElementById('lgImg');

//---- SET NEW SIZE
 oH = o.height;

 newH = (oH + maxH + maxH + maxH)/4;
 if (newH > maxH - 5)
  newH = maxH;
 newScale = newH / minH;
 newW = wArr[curImg] * newScale;
 o.height = newH;
 o.width = newW;
 
//----- GET PERCENTAGE COMPLETE
 tmpPerc = (newH - minH) / diffH;

//----- SET NEW MARGIN
 newY = Math.round(tmpPerc * diffY + minY);
 o.style.top = newY + 'px';


//----- SET ALPHA
 newAlpha = maxAlpha - alphaDiff * tmpPerc;
 if (!document.getElementById('imgTable').alphaVal || document.getElementById('imgTable').alphaVal > newAlpha) {
  document.getElementById('imgTable').alphaVal = newAlpha;
  document.getElementById('imgTable').style['filter'] = 'alpha(opacity='+newAlpha+')';
  newAlpha /= 100;
  document.getElementById('imgTable').style['-moz-opacity'] = newAlpha;
  document.getElementById('imgTable').style['-khtml-opacity'] = newAlpha;
  document.getElementById('imgTable').style['opacity'] = newAlpha;
 
  o = document.getElementById('scrollBar');
  newAlpha -= 0.1;
  o.style['-moz-opacity'] = newAlpha;
  o.style['-khtml-opacity'] = newAlpha;
  o.style['opacity'] = newAlpha;
  newAlpha *= 100;
  o.style['filter'] = 'alpha(opacity='+newAlpha+')';
 }

//----- SET NEW X POS
//----- IMG TABLE
 curX = Math.round((curX + endX + endX)/3);
 if (Math.abs(curX - endX) < 2)
  curX = endX;
 document.getElementById('imgTable').style.left = curX + 'px';
//----- IMG 2
 tmpX = curX;
 for (i=0;i<curImg;i++)
  tmpX += wArr[i] + imgSpacing;
 document.getElementById('lgImg').style.left = tmpX + 'px';

 if (newH != maxH || curX != endX) {
  aTO = setTimeout('enlargeImage()', 50);
 } else {
  document.getElementById('lgImg').style.top = maxY+'px';

  tmpW = Math.round(document.getElementById('lgImg').width) - 46;

  document.getElementById('arrowR').style.left = tmpW + 'px';
  if (curImg < totalImages - 1)
   document.getElementById('arrowR').style.visibility = 'visible';
 }
}



function hideImage() {
 clearTimeout(aTO);

 document.getElementById('arrowR').style.visibility = 'hidden';

 aTO = setTimeout('shrinkImage()', 50);
}


function shrinkImage() {
 clearTimeout(aTO);

 oH = document.getElementById('lgImg').height;
 newH = (oH + minH + minH)/3;
 if (newH < minH + 5)
  newH = minH;
 newScale = newH / minH;
 newW = wArr[curImg] * newScale;
 document.getElementById('lgImg').height = newH;
 document.getElementById('lgImg').width = newW;

//----- GET PERCENTAGE COMPLETE
 tmpPerc = (newH - minH) / diffH;

//----- MOVE TO THE RIGHT IF WE NEED TO
 if (curX < minX) {
  curX = Math.round((curX + minX + minX)/3)
  if (Math.abs(curX - minX) < 3 || tmpPerc < 5)
   curX = minX;

  document.getElementById('imgTable').style.left = curX + 'px';
  tmpX = curX;
  for (i=0;i<curImg;i++)
   tmpX += wArr[i] + imgSpacing;
  document.getElementById('lgImg').style.left = tmpX + 'px';
 }

//----- SET NEW MARGIN
 newY = Math.round(tmpPerc * diffY + minY);
 document.getElementById('lgImg').style.top = newY + 'px';

//----- SET ALPHA
 newAlpha = maxAlpha - alphaDiff * tmpPerc;
 if (!document.getElementById('imgTable').alphaVal || document.getElementById('imgTable').alphaVal < newAlpha) {
  document.getElementById('imgTable').alphaVal = newAlpha;
  document.getElementById('imgTable').style['filter'] = 'alpha(opacity='+newAlpha+')';
  newAlpha /= 100;
  document.getElementById('imgTable').style['-moz-opacity'] = newAlpha;
  document.getElementById('imgTable').style['-khtml-opacity'] = newAlpha;
  document.getElementById('imgTable').style['opacity'] = newAlpha;

  o = document.getElementById('scrollBar');
  newAlpha -= 0.1;
  o.style['-moz-opacity'] = newAlpha;
  o.style['-khtml-opacity'] = newAlpha;
  o.style['opacity'] = newAlpha;
  newAlpha *= 100;
  o.style['filter'] = 'alpha(opacity='+newAlpha+')';
 }

//----- SCROLL BAR MOVE
 autoMoveScrollBar();

 if (newH != minH) {
  aTO = setTimeout('shrinkImage()', 50);
 } else {
  document.getElementById('lgImg').style.visibility = 'hidden';
  document.getElementById('lgImgHolder').style.visibility = 'hidden';
 }
}




function handScroll(event) {
 isDragging = true;
 if (document.addEventListener) {
  document.addEventListener("mousemove", dragGo, false);
  document.addEventListener("mouseup", dragStop, false);
 } else if (document.attachEvent) {
  document.attachEvent('onmousemove', dragGo);
  document.attachEvent('onmouseup', dragStop);
 }
 if(event.preventDefault) event.preventDefault();
}

function dragGo(event) {
 if (scrollStartX == 0)
  scrollStartX = event.clientX;

 scrollNewX = event.clientX - scrollStartX + scrollBarX;
 if (scrollNewX < 0)
  scrollNewX = 0;
 else if (scrollNewX > scrollBarSpace)
  scrollNewX = scrollBarSpace;

 document.getElementById('scrollBarHandle').style.left = scrollNewX + 'px';
 scrollPerc = scrollNewX / scrollBarSpace;
 curX = scrollPerc * minX;
 document.getElementById('imgTable').style.left = curX + 'px';
}

function dragStop(event) {
 if (event == null)
  event = window.event;

 if (document.removeEventListener) {
  document.removeEventListener("mousemove", dragGo, false);
  document.removeEventListener("mouseup", dragStop, false);
 } else if (document.detachEvent) {
  document.detachEvent("onmousemove", dragGo);
  document.detachEvent("onmouseup", dragStop);
 }
 scrollBarX = scrollNewX;
 scrollStartX = 0;
}










touchMove = function(event) {
// Prevent scrolling on this element
event.preventDefault();
}

var newX = 0;
var swipeStart = 0;

function startSwipe(o, e) {
 e.preventDefault();

 swipeStart = e.touches[0].pageX;
 var fingerX = swipeStart;

 o.ontouchmove = function(e) {
  fingerX = e.touches[0].pageX;

  newX = fingerX - swipeStart + curX;
  if (newX > 0) {
   newX = 0;
  }
  document.getElementById('imgTable').style.left = newX + 'px';
 }

 o.ontouchend = function(e) {
  tmpNum = getImageNum(swipeStart);
  if (Math.abs(swipeStart - fingerX) < 100)
   showImage(tmpNum);
  else
   curX = newX;
 }
}

function getImageNum(fX) {
 fX -= 450;
 fX -= curX;
 var tmpMin = 0;
 var tmpMax = 0;
 for (i=0;i<wArr.length;i++) {
  if (i > 0)
   tmpMin += wArr[i-1] + imgSpacing;
  tmpMax += wArr[i] + imgSpacing;
  if (fX > tmpMin && fX < tmpMax) {
   return(i);
  }

 }
}