window.addEvent("domready", function() {		
	var itemImageDiv = $('itemimage');
	var imagePath = $('portfoliolarge');
	var imageDiv = $('inner_image');
	var itemText = $('item-text');
	var resetBtn = $('resetimg');
	var imageSize = 0;
	var offset = 0;
	var bodyWidth = window.getWidth();
	var bodyHeight = window.getHeight();
	var rootPath = "http://www.maplerockdesign.co.uk";
	var detailLink = $('item-details');
	var pathNotFound = false;
	var closeBtn = new Element('a', {
		'href':'#',
		'id':'close-detail',
		'html':'Close'
    });
	var dragHelper = new Element('div', {
		'html':'click and drag me',
		'id':'draghelper'
	});
	if(itemText) {
		closeBtn.inject(itemText,"top");
	}


	var myDrag = new Drag.Move(imageDiv);
	
	var loadingDiv = new Element('div', {
		'class':'loading',
		'html':'<span>Loading graphic...</span>'
    });
    
	
	loadingDiv.inject(itemImageDiv);


    var loadImagePath = [imagePath.src];
				
	var myImage = new Asset.images(loadImagePath, {
		onComplete: function() {
			loadingDiv.fade('out');
			loadingDiv.dispose();
			imgSize = imagePath.getSize();
			
			//check image loaded if error the show image not found image
			if(pathNotFound) {
				var notFoundImg = new Element('img', {
					'src':rootPath+"/images/css/notfound.gif"
			    });
				myDrag.detach();
				imagePath.dispose();
				imagePath = notFoundImg;
				itemImageDiv.setStyle("height","339px");
				itemImageDiv.setStyle("width","250px");
				
				imageDiv.setStyle("cursor","default");
				
				notFoundImg.inject(imageDiv);
			}
			else {
				dragHelper.inject($('controls'),"top")
				//add image as background-image in ie as drag not supported
				if(Browser.Engine.trident) {
					bkgSrc=imagePath.src;
					imageDiv.setStyle("background-image","url("+imagePath.src+")");
					
					itemImageDiv.setStyle("height",imgSize.y);
					itemImageDiv.setStyle("width",imgSize.x);
					imageDiv.setStyle("height",imgSize.y);
					imageDiv.setStyle("width",imgSize.x);
					imagePath.dispose();
					imagePath = imageDiv;
				}
	
				
				itemImageDiv.setStyle("height",imgSize.y);
				
				if (bodyWidth <= 999 && imgSize.x >= 780) {
					offset = "-"+((imgSize.x - 800)/2)+"px";
					imagePath.setStyle("left",offset);
					
					itemImageDiv.setStyle("width","785px");
					$('controls').setStyle("width","785px");
				}
				else {
					offset = "6px";
					itemImageDiv.setStyle("width",imgSize.x);
					$('controls').setStyle("width",imgSize.x);
				}
				
				
				var myFx = new Fx.Tween(imagePath,{duration:750});
				myFx.start('opacity', '0', '1');
				
				var fxBorder = new Fx.Tween(itemImageDiv);
	
				fxBorder.start('border-color', '#252525', '#CCFF00');
			}
		},
		onError: function (counter,index) {
			pathNotFound = true;
		}
	});

	if(detailLink) {
	    detailLink.addEvent("click", function(evt) {
			new Event(evt).stop();
			itemText.setStyle("display","block");
			var myFx = new Fx.Tween(itemText,{duration:1000});
			myFx.start('height', 0, 600);
	    });
	}
    
    resetBtn.addEvent("click", function(evt) {
    	new Event(evt).stop();
    	currentPosLeft = imageDiv.getStyle("left");
    	currentPosTop = imageDiv.getStyle("top");

    	var resetFx = new  Fx.Morph(imageDiv,{transition: 'sine:out',duration:500});

    	resetFx.start({
    		'left':[currentPosLeft,6],
    		'top':[currentPosTop,6]
    	});
    });
    
    closeBtn.addEvent("click", function(evt) {
    	new Event(evt).stop();
    	var myFx = new Fx.Morph(itemText,{duration:500, onComplete: function() {
    		itemText.setStyle("display","none");
    	}
    	});
		myFx.start({
    		'height':[300,0]
    	} 
				
		);
    });
    
   	
});