Драгабл работает не так как надо
 

Здравствуйте, помогите понять почему не пашет код:

$(document).ready(function() {
	var doc = document.documentElement;
			var photo = $("#photobox");
			
			photo.draggable({ cursor: 'pointer'});

			photo.bind('drag', function(event,ui){
				var pos = ui.position;
				if (pos.left > 0){  
					photo.css("left",0 + 'px');
				}
				if (pos.left < -2304 + doc.clientWidth) {
					photo.css("left",-2304 + doc.clientWidth + 'px');
				}
				
				if (pos.top > 0) {
					photo.css("top",0 + 'px');
				} 
				
				 if (pos.top < -1728 + doc.clientHeight) {
					photo.css("top",-1728 + doc.clientHeight + 'px');
				}
			});
	});

По моей идее, этот код должен ограничивать драг фотографии 2304х1728 в пределах экрана, а он только драгит фотку без всяких ограничений, очень помогите!!! Давно бьюсь, я тока начал изучение и вообще догнать не могу... Может можно сделать как-то по другому? Cpntainment: #wrapper-div не предлогать:)
заранее спасибо