var imageTimeout;
var tempMainImage;
var tempZoomImage;
var draggableHandle;


function showMain(imgId){

  selectedImgid = imgId;
  tempMainImage = new Image();
  tempMainImage.src = imgArray[imgId]['med'];
  //$('imgMain').src = imgArray[imgId]['med'];
  if(!tempMainImage.complete){
    $('mainImg').style.width='16px';
    $('mainImg').style.height='16px';
    
    $('mainImg').style.position = 'absolute';
    
    $('mainImg').style.left = '111px';
    $('mainImg').left = '111px';
    
    $('mainImg').style.top = '160px';
    $('mainImg').top = '160px';
    
    $('mainImg').src = loadingImage.src;

    imageTimeout = window.setInterval("isLoadedMain()", 500);
  }else{
    isLoadedMain();
  }
  
}

function isLoadedMain(){
  if(tempMainImage.complete){
     $('mainImg').src = tempMainImage.src;
     $('mainImg').style.left = '0';
     $('mainImg').style.top = '0';
     $('mainImg').style.height = '334px';
     $('mainImg').style.width = '228px';
     
     
     $('zoomOut').style.display = 'none';
     $('zoomIn').style.display = '';
     
     $('divMainImage').style.display = 'block';
     $('divMainImageZoom').style.display = 'none';

    window.clearInterval(imageTimeout);
  }
}

function zoomIn(){
  tempZoomImage = new Image();
  tempZoomImage.src = imgArray[selectedImgid]['large'];
  if(!tempZoomImage.complete){
    
    $('mainImg').src = loadingImage.src;
    $('mainImg').style.height = '16px';
    $('mainImg').style.width = '16px';
    
    $('mainImg').style.position = 'absolute';
    
    $('mainImg').style.left = '111px';
    $('mainImg').left = '111px';
    
    $('mainImg').style.top = '160px';
    $('mainImg').top = '160px';
    
    imageTimeout = window.setInterval("isLoadedLarge()", 500);
  }else{
    isLoadedLarge();
  }
}

function isLoadedLarge(){
  if(tempZoomImage.complete){

    $('divMainImageZoom').innerHTML = '<img id="mainImgZoom" src="' + tempZoomImage.src + '" />';
    $('mainImgZoom').title = "Click and hold to drag image";
    
    $('divMainImage').style.display = 'none';
    $('divMainImageZoom').style.display = 'block';

    window.clearInterval(imageTimeout);

    
    //centerAlign($('divMainImageZoom'), $('mainImgZoom'));
    enableDrag('divMainImageZoom', 'mainImgZoom', 600, 920);

    //$('mainImgZoom').style.left = '-310px';
    //$('mainImgZoom').left = '-310px';
    //$('mainImgZoom').style.top = '-484px';
    //$('mainImgZoom').top = '-484px';
    //
    //
    $('zoomIn').style.display = 'none';
    $('zoomOut').style.display = 'block';
    
  }
}


function zoomOut(){
      
  $('divMainImage').style.cursor = '';
  showMain(selectedImgid);
}


function centerAlign(container, item){

  var con_coord  = getPosition(container);
  var item_coord = getPosition(item);
  
  var con_size = container.getDimensions();
  var item_size = item.getDimensions();
    
  var cur_left =  parseInt((con_size.width - item_size.width)/2);
  var cur_top  =  parseInt((con_size.height - item_size.height)/2);
  
  //new Effect.Move($('mainImg'), { x: cur_left, y: cur_top, mode: 'relative' });
  item.style.top = cur_top +'px';
  item.style.left = cur_left+'px';
  
  item.top = item.style.top;
  item.left = item.style.left;
  

}