window.addEvent('domready', TB_init);
function TB_init(){
    $$("a.jbox").each(function(el){
        el.onclick = TB_bind
    });
}

function TB_bind(event){
    var event = new Event(event);
    event.preventDefault(); // stop default behaviour
    this.blur(); // remove click border
    var caption = this.title || this.name || ""; // get caption: either title or name attribute
    var group = this.rel || false; // get rel attribute for image groups
	var btnlink = this.lang;
	myZoomIn(caption, this.href, group, btnlink); // display the box for the elements href
    this.onclick = TB_bind;
    return false;
}

function myZoomIn(cap, img, group, btnlink){
	var imgPop = new Image();
	imgPop.src = img;
	document.getElementById('zoom').style.display='block';
	var myEffect = new Fx.Morph('zoom', {
		duration: 'long', 
		transition: Fx.Transitions.Quad.easeInOut,
		onComplete: function(){
			document.getElementById('caption').innerHTML='<a href="'+btnlink+'" target="_blank">Buy</a>';
			document.getElementById('imgZoom').src=imgPop.src;
			document.getElementById('imgZoom').style.visibility='visible';
			
			var myFx = new Fx.Scroll('scrollBox').set(0,1000);
			var myFx = new Fx.Scroll('scrollBox',{
				wait: false,
				link: 'cancel',
				wheelStops: false,
				duration: 2000,
				transition: Fx.Transitions.Quad.easeInOut	
			}).toTop();
			document.getElementById('caption').style.visibility='visible';
			document.getElementById('closeBtn').style.visibility='visible';		
		}
	}).start('.show');
	
	var myDrag = new Drag('imgZoom', {
		onDrag: function(){
			var sizeImg = document.getElementById('imgZoom').clientHeight;
			var sizeBox = document.getElementById('zoom').clientHeight;
			var sizeCap = document.getElementById('caption').clientHeight;
			var sizeNeg=((sizeBox-sizeCap)-sizeImg);
			document.getElementById('imgZoom').style.left=0;
			posY = document.getElementById('imgZoom').style.top;
			posY = posY.replace(/px/,"");
			if(posY < sizeNeg ){
				document.getElementById('imgZoom').style.top=sizeNeg+'px';
			}
			if(posY > 0 ){
				document.getElementById('imgZoom').style.top='0px';
			}
		},
		onComplete: function(){
		}
	});					  
}

function closeIt(){
	var imgPop = new Image();
	imgPop.src = "http://www.11north.com/images/blank.gif";
	document.getElementById('imgZoom').style.top=0;
	document.getElementById('imgZoom').style.left=0;	
	document.getElementById('imgZoom').style.visibility='hidden';
	document.getElementById('caption').style.visibility='hidden';
	document.getElementById('closeBtn').style.visibility='hidden';	
	var myEffect = new Fx.Morph('zoom', {
		duration: 'long', 
		transition: Fx.Transitions.Quad.easeInOut,
		onComplete: function(){
			document.getElementById('zoom').style.display='none';	
			document.getElementById('imgZoom').src;
		}
	}).start('.hide');	
}

// XML 
function parseXML()
{
xmlsrc="http://www.11north.com/jbox.xml";
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(xmlsrc);  
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
	var xmlhttp = new window.XMLHttpRequest();
	xmlhttp.open("GET",xmlsrc,false);
	xmlhttp.send(null);
	var xmlDoc = xmlhttp.responseXML.documentElement
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }


var imgArray = [];
imageObj = new Image();

var x=xmlDoc.getElementsByTagName("image");
for (i=0;i<x.length;i++) {
	imageUrl=x[i].getAttribute("url");
	imageThumb=x[i].getAttribute("thumb");
	imageTitle=x[i].getAttribute("title");
	imageLink=x[i].getAttribute("link");
	document.write('<div class="item"> <a href="'+imageUrl+'" title="'+imageTitle+'" class="jbox" lang="'+imageLink+'" style="background:url('+imageThumb+') no-repeat top;"></a></div>');
	imgArray.push(imageUrl);
	}
     for(y=0; y<=imgArray.length; y++) 
     {
          imageObj.src=imgArray[y];
     }	
}