$(document).ready(function() {
							   
		$('#clipregion').clipregion({
				'itemHeight':700,
				'itemWidth':1000,
				'totalItems':$('ul > li',$('#clipregion')).size(),
				'itemsToShow':1,
				'itemStep':true
			});
		
		$(".zoomOutCursor").live("click", function(){
			zoomOut();
			$("#container").css({ width: '1000px'});
	    });
		
		$(".zoomInCursor").live("click", function(){
			var srclen = $(this).attr('src').length-4;
			var imgUrl = $(this).attr('src').substring(0,srclen) + "-big.jpg";
			zoomIn(imgUrl);
	    });	 
		
		$(".wide1200").live("click", function(){
			$("#loader").css('width','1200px');
			$("#container").css({ width: '1200px' });
	    });	 
		
		var current = getCurrent();	

		$.clipregion.setPos(current);
		positionIt();
		
		checkButtons();
		checkMulti();
		
		$('#footer #previous').click(function() {

/* za postavljanje atributa u url pri navigaciji medju slikama. secka, a i slike mogu da promene redosled pa je neprakticno 

			current = getCurrent();
			current= parseInt(current)-1000;
			if($(this).hasClass('footerNavActive')) 
				$(this).attr('href','?pid='+current);
*/
			$.clipregion.prev();
			checkButtons();
			positionIt();
			checkMulti();
		});
		
		$('#footer #next').click(function() {
/*			current = getCurrent();
			current= parseInt(current)+1000;
			if($(this).hasClass('footerNavActive')) 
				$(this).attr('href','?pid='+current);
*/
			$.clipregion.next();
			checkButtons();
			positionIt();
			checkMulti();
		});
		

		function getCurrent() {
			var cur = $(document).getUrlParam("pid");
			if(cur==null) cur=0;
			return cur;
		}

	});

	function positionIt() {
		if (jQuery.browser.msie) return;
		var imgId = "#graphic"+($.clipregion.getIdx()+1);
		var imgW = $(imgId).attr('width');
		if(imgW==0) {
			switch (imgId)
			{
			case '#graphic8': case '#graphic9': case '#graphic12': case '#graphic13': case '#graphic20': case '#graphic23': case '#graphic24': case '#graphic25': case '#graphic26': case '#graphic27': case '#graphic28': case '#graphic29': case '#graphic30': case '#graphic31': case '#graphic32': case '#graphic33':
				imgW = '650px';
				break;				
			case '#graphic34': case '#graphic35': case '#graphic36': case '#graphic37': case '#graphic38':
				imgW = '800px';
				break;	
			default:
				imgW = '458px';
				break;
			}
		}
		$('#mainGraphic').css({ width: imgW }); 
	}