function openWindow(url) {
    newWindow = window.open (url,'myWindow','width=1400,height=1000');  
}
// zoomIn and zoomOut should be bound to clickable zoom controls, which should be siblings of an element of class 'zoom-window', 
// which should in turn contain the image to be zoomed as its first child element.  This means the zoom-window and the img tag 
// inside it should have no whitespace between them.
//
//   in other words:
//
// <div class='zoom-window'><img src='images/picture.png' /></div>
// <img src='images/zoom-in-button.png' onclick='zoomIn(this, 1000, 1200)' />
// <img src='images/zoom-out-button.png' onclick='zoomIn(this, 500, 600)' />
//
//

function zoomIn(button, newWidth, newHeight) {
	button.siblings().each(function(sib) {
		if(sib.hasClassName('zoom-window')) {
			var preZoomWidth = sib.firstChild.width
			if(preZoomWidth <= 575) {
				//new Effect.Scale(sib.firstChild, 200, {scaleFromCenter: true, duration: .3});
				var preZoomHeight = sib.firstChild.height
				var newX = (preZoomWidth - newWidth)/2
				var newY = (preZoomHeight - newHeight)/2
				sib.firstChild.morph('width:' + newWidth + 'px; height:' + newHeight + 'px;', {duration: 0.3});
				new Effect.Move(sib.firstChild, { x: newX, y: newY, mode: 'absolute', duration: .3});
				sib.firstChild.drag = new Draggable(sib.firstChild, {ghosting: false});
				sib.addClassName('move-cursor');
				zoomed++;
			}
		}
	});
}

function zoomOut(button, originalWidth, originalHeight) {
	button.siblings().each(function(sib) {
		if(sib.hasClassName('zoom-window')) {
			var preZoomWidth = sib.firstChild.width
			if(preZoomWidth > 570){
				//new Effect.Scale(sib.firstChild, 50, {scaleFromCenter: true, duration: .3});
				sib.firstChild.morph('width:' + originalWidth + 'px; height:' + originalHeight + 'px;', {duration: 0.3});
				new Effect.Move(sib.firstChild, { x: 0, y: 0, mode: 'absolute', duration: .3});
				zoomed--;
				sib.firstChild.drag.destroy();		
				sib.removeClassName('move-cursor');
			}
		}
	});
	
}

function proceduralDrag(){
	new Draggable('box-grid-procedural',{
	  snap: function(x,y) {
	    return[
	      x<100 ? (x > 0 ? x : 0 ) : 100,
	      y<50 ? (y > 0 ? y : 0) : 50];
	  },
	  revert:true
	});
}
var zoomed=1;