var dim       = document.viewport.getDimensions();
var max_onder = -(4000 -(dim.height - 180));
var max_right = -(5000 -(dim.width));
var lastParallel = null;
var draggable_pics = new Array();
var EFFECT_DURATION = 0.7;
var draggingPic = false;
var	draggingPhotoContent = false;

function stopParallelEffects(Paralleleffect) {
  if(Paralleleffect != null) {
    Paralleleffect.cancel();
  }
}

function deselectMatrixTitles(el) {
  $$('.thumb a div.title').each(function(div) {
    if(el != div)
      div.removeClassName('over');
  });  
}

function restoreImages(currentOver, effects) {
  $$('.thumb a img').each(function(img) {
    if(img != currentOver && img != currentOver.previous()) {
      if(img.hasClassName('off')) {
        effects.push(new Effect.Appear(img, {sync: true}));      
      } else {
        effects.push(new Effect.Fade(img, {sync: true}));            
      }
    }
  });  
}

function mouseOverMatrixItem(el) {
  var effects = new Array();
  
  if(el.hasClassName('off')) {
    var imageOff  = el;
    var imageOver = el.next();
  } else if(el.hasClassName('over')) {
    var imageOver = el; 
    var imageOff  = el.previous();
  } 
  
  if(!el.hasClassName('photoalbumLink')) {
		var titleDiv  = imageOver.next();
		deselectMatrixTitles(titleDiv);
		restoreImages(imageOver, effects);  
		titleDiv.addClassName('over');  
  }

  effects.push(new Effect.Fade(imageOff, {sync: true}));
  effects.push(new Effect.Appear(imageOver, {sync: true}));

  if(effects.length > 0) {
    stopParallelEffects(lastParallel);
    lastParallel = new Effect.Parallel(effects, {duration: EFFECT_DURATION
    });
  }
}

function showPic(el) {
	// el is the div containing the two photo's and title
	var effects = new Array();
	var colorPic;
	if(el.down() && el.down().hasClassName('color')) {
		colorPic = el.down();
	}
	
	// Make sure that all the other pictures are not been shown, in that
	// case, fade them (and also the titles!)
	$$('img.color').each(function(colorImages) {	
		if(colorImages != colorPic) {
			colorImages.up().setStyle({zIndex: '0'});
			colorImages.hide();		
			colorImages.next().setOpacity(0.75);
			if(colorImages.next().next()) {
				colorImages.next().next().setOpacity(0.40);
			}
			colorImages.next().setOpacity(0.75);			
			colorImages.next().show();
		}
	});
	
	// Appear color photo and fade bw foto
	effects.push(new Effect.Appear(colorPic, {sync: true}));
	effects.push(new Effect.Fade(colorPic.next(), {sync: true}));
	if(colorPic.next().next()) {
		colorPic.next().next().setOpacity(1.0);			
	}
	
	if(effects.length > 0) {
    stopParallelEffects(lastParallel);
    lastParallel = new Effect.Parallel(effects, {duration: EFFECT_DURATION});
  }	
	
	// Make the now color photo draggable!
	if(draggable_pics.length > 0) {
		draggable_pics.each(function(dpics) {
			dpics.destroy();
		});
	}
	
	draggable_pics.push(new Draggable(el, {starteffect: '', endeffect: '', 
											onStart: function() {
											draggingPic = true;
											},
											onFinish: function() {
											draggingPic = false;											
											}
											}));
	if(draggingPic == true || draggingPhotoContent == true) {
		draggingPic = false;
		draggingPhotoContent = false;
		return;
	}

	// Move the rectangle so that the picture stay in the middle of the screen
	var photoOffset = el.cumulativeOffset();
	var moveX = 0;
	var moveY = 0;
	// Calculate x and y
	
	  // Check that we don't move the photo container more than the limit
    var photoContentleft  = parseInt($('photoContent').getStyle('left').gsub("px", ""));	
		var photoContentwidth = parseInt($('photoContent').getWidth());	
	
		moveX = ((dim.width/2) - el.getWidth()/2) - photoOffset.left; 
		moveY = (dim.height-180)/2 - el.getHeight()/2 - photoOffset.top + 180;
	
	
	effects.push(new Effect.Move('photoContent', { x: moveX, y: moveY, mode: 'relative' }));


	if(effects.length > 0) {
    stopParallelEffects(lastParallel);
    lastParallel = new Effect.Parallel(effects, {duration: EFFECT_DURATION});
  }
}

function resetForm(formId) {
  $$('#'+formId+' input, #'+formId+' textarea').each(function(el){
    if(el.tagName=='INPUT' && !el.hasClassName('button'))
      el.value='';
    else if(el.tagName=='TEXTAREA')
      el.innerHTML='';
  });
}

document.observe('dom:loaded', function() {
	
	// Positionate the photoalbum div in the middle
	// Calculate left offset
	if($('photoContent')) {
		var l = dim.width/2 - $('photoContent').getWidth()/2;
		var t = dim.height/2 - $('photoContent').getHeight()/2;

		$('photoContent').setStyle({left: l+'px'});
		$('photoContent').setStyle({top: t-180+'px'});
	}
		
  // Off images in the matrix homepage
  $$('img.off').each( function(el) {
    el.observe('mouseover', function(event) {
      event.stop();
      mouseOverMatrixItem(el);
    });
  });
  
  $$('table.popup img').each(function(el) {
    el.observe('click', function(event) {
      event.stop();
			src = el.src;
			src = src.gsub('.jpg', '_popup.jpg');
			
			 var o = new Image();
			 o.src = src;
			 var w = parseInt(screen.width/2-(1000/2));
			 var h = parseInt(screen.height/2-(750/2));
			 var look = 'location=no, width=0px, height=0px, left='+w+', top='+h;


			 popwin = window.open('', '', look);
			 popwin.document.open();
			 popwin.document.write("<html><head>"+
			 "<META HTTP-EQUIV=\"imagetoolbar\" CONTENT=\"no\">"+
			 "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">"+
			 "</head>"+
			 "<style type=\"text/css\"> "+
			 "<!-- BODY { margin : 0px; } -->"+
			 "</style>"+
			 "<body style='background-color: #000000; text-align: center;'>"+
			 "<a href='javascript:self.close();' style='text-align: center;'>"+
			 "<img style='border: none;' src='"+src+"' alt=\"Click Image to Close\"></a></body></html>");
			 setTimeout(function(){
			 popwin.resizeTo(o.width, o.height+62);}, 240);
			 popwin.document.close();			
    });   
  });
  
  
  $$('img.photoalbumLink').each( function(el) {
  
    el.observe('mouseout', function(event) {
      event.stop();    
    	if(el.hasClassName('off')) {
    		return;
    	}

      
		var effects = new Array();
		
		if(el.hasClassName('off')) {
		  var imageOff  = el;
		  var imageOver = el.next();
		} else if(el.hasClassName('over')) {
		  var imageOver = el; 
		  var imageOff  = el.previous();
		} 
		
		effects.push(new Effect.Fade(imageOver, {sync: true}));
		effects.push(new Effect.Appear(imageOff, {sync: true}));

		if(effects.length > 0) {
		  stopParallelEffects(lastParallel);
		  lastParallel = new Effect.Parallel(effects, {duration: EFFECT_DURATION
		  });
		}
    });
    
    el.observe('mouseover', function(event) {
      event.stop();    
    	if(el.hasClassName('over')) {
    		return;
    	}
      
		var effects = new Array();
		
		if(el.hasClassName('off')) {
		  var imageOff  = el;
		  var imageOver = el.next();
		} else if(el.hasClassName('over')) {
		  var imageOver = el; 
		  var imageOff  = el.previous();
		}
		
		effects.push(new Effect.Appear(imageOver, {sync: true}));
		effects.push(new Effect.Fade(imageOff, {sync: true}));

		if(effects.length > 0) {
		  stopParallelEffects(lastParallel);
		  lastParallel = new Effect.Parallel(effects, {duration: EFFECT_DURATION
		  });
		}
		
    });    
    
  });  
  
  $$('.photoalbumLink').each( function(el) {
    el.observe('click', function(event) {
      event.stop();
      Sound.play('http://www.albex.nl/public/sounds/camera4.mp3', {replace:true});
      setTimeout(function(){
      						window.location = el.up().href;
      					 }, 900);
    });
  });  
  
  // Div's met photo's in the photoalbum
  $$('div.photo').each( function(el) {
    el.observe('click', function(event) { 
      event.stop();
			showPic(el);
      el.setStyle({zIndex: '9999'});
/*      var photoOffset = el.cumulativeOffset();
      $('debug1').innerHTML = "<br />Photo top: "+photoOffset.top+"<br />"+
                                    "Photo left "+photoOffset.left+"<br />";
*/                                    

    });
  });  
  
  if($('photoContent')) {
    new Draggable('photoContent', {change: function(ph) {
    		draggingPhotoContent = true;      
/*      $('debug').innerHTML = "<br />"+ph.element.getStyle('top').gsub("px", "")+
                                    " "+ph.element.getStyle('left')+"<br />"+
                                    "Dimensions: h: "+dim.height+" w: "+dim.width+"<br />";
*/                                    
      var top  = ph.element.getStyle('top').gsub("px", "");
      var left = ph.element.getStyle('left').gsub("px", "");
      
      if(top > 1) {
        ph.element.setStyle({top: '0px'});
      } else if(top < max_onder) {
        ph.element.setStyle({top: max_onder+'px'});              
      }

      if( left > 1) {
        ph.element.setStyle({left: '0px'});        
      } else if(left < max_right) {
        ph.element.setStyle({left: max_right+'px'});        
      }
    }, starteffect: '', endeffect: ''}
    );
	if(draggingPic == true || draggingPhotoContent == true) {
		draggingPic = false;
		draggingPhotoContent == false;
		return;
	}    
    
    
  }
  
});