// user's functions
 function ShowBlock1 () {

         document.getElementById('spec4').style.display='block';
         document.getElementById('spec5').style.display='none';
         document.getElementById('spec6').style.display='none';
 };
				     
 function ShowBlock2 () {
         document.getElementById('spec5').style.display='block';
         document.getElementById('spec4').style.display='none';
         document.getElementById('spec6').style.display='none';
 };
										 
 function ShowBlock3 () {
         document.getElementById('spec6').style.display='block';
         document.getElementById('spec5').style.display='none';
         document.getElementById('spec4').style.display='none';
 }


function getElementPositionMy(oElement){
    var res = new Array(0, 0);
    // Get coordinates
    do{
        res[0] += oElement.offsetLeft;
        res[1] += oElement.offsetTop;
    }while((oElement = oElement.offsetParent) != null);
    return res;
}

var enlargeInterval = null;

function zoomPlus(itemdiv, item, fSmallWH, fOrigWH, fovrfX, fovrfY) {
	var stepX = 50;
	var stepY = Math.ceil(fOrigWH[1] / fOrigWH[0] * stepX);
	var stepdX = 25;
	var stepdY = Math.ceil(fOrigWH[1] / fOrigWH[0] * stepdX);
		
	var diffX = Math.ceil(fovrfX / ((fOrigWH[0] - fSmallWH[0]) / stepX));
	var diffY = Math.ceil(fOrigWH[1] / fOrigWH[0] * diffX);

	//alert(item.width + ':' + fOrigWH[0]);
	//alert(item.width +'<'+ fOrigWH[0]);

	if (item.width < fOrigWH[0] / 2) {

		item.width += stepX;
		item.height += stepY;
				
		itemdiv.style.left = parseInt(parseInt(itemdiv.style.left) - stepdX - diffX) + 'px';
		itemdiv.style.top = parseInt(parseInt(itemdiv.style.top) - stepdY - diffY) + 'px';
	} 
	else if (item.width < fOrigWH[0]) {
		stepX = stepX;
		stepY = Math.ceil(fOrigWH[1] / fOrigWH[0] * stepX);
		stepdX = stepdX;
		stepdY = Math.ceil(fOrigWH[1] / fOrigWH[0] * stepdX);
		
		if (item.width + stepX > fOrigWH[0]) {
			stepdX = fOrigWH[0] - item.width;
			stepdY = Math.ceil(fOrigWH[1] / fOrigWH[0] * stepdX);
			itemdiv.style.left = parseInt(parseInt(itemdiv.style.left) - (fOrigWH[0] - item.width)/2 - diffX) + 'px';
			itemdiv.style.top = parseInt(parseInt(itemdiv.style.top) - (fOrigWH[1] - item.height)/2 - diffY) + 'px';
			
			item.width = fOrigWH[0];
			item.height = fOrigWH[1];
		} 
		else {
			item.width += stepX;
			item.height += stepY;
			
			itemdiv.style.left = parseInt(parseInt(itemdiv.style.left) - diffX) + 'px';
			itemdiv.style.top = parseInt(parseInt(itemdiv.style.top) - diffY) + 'px';
		}
	} 
	else {
		clearInterval(enlargeInterval);

		itemdiv.style.top = (parseInt(itemdiv.style.top)) + 'px';
		itemdiv.style.left = (parseInt(itemdiv.style.left)) + 'px';
		
		itemdiv.style.width = (parseInt(item.width) + 16) + 'px';
		itemdiv.style.height = (parseInt(item.height) + 16) + 'px';
		item.style.margin = '8px';
		itemdiv.style.backgroundColor = '#eee';
		itemdiv.style.border = 'solid #ccc 2px';
	}
}

function zoomPict(item) {
	var mid_pict = item;
	var big_pict_div = document.getElementById('item_big_pict_div');
	var big_pict = 	big_pict_div.firstChild;


	//ширина окна
	//Math.max((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth));
	//Math.max((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight));	
	
     // Get full document width. If document width is too short client width will be used.
    var docAllWidth =  Math.max((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth), document.body.scrollWidth);
    var docAllHeight = Math.max((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight), document.body.scrollHeight);
    
	//если ширина(высота) большой картинки больше ширины(высоты) экрана то приравниваем к экрану
	//if (big_pict.width > docAllWidth) big_pict.width = docAllWidth;
	//if (big_pict.height > docAllHeight) big_pict.height = docAllHeight;
	
	var OrigWH = new Array(big_pict.width, big_pict.height);
    var SmallWH = new Array(mid_pict.width, mid_pict.height);
	
	//позиции элементов
	var midPos = getElementPositionMy(mid_pict);
	var bigPos = new Array(Math.ceil(midPos[0] - (big_pict.width - mid_pict.width)/2), Math.ceil(midPos[1] - (big_pict.height - mid_pict.height)/2));
	
	//максимум по координатам и дельта для смещения
	var superPos = Array(bigPos[0] + big_pict.width, bigPos[0] + big_pict.height);
	if (superPos[0] > docAllWidth) ovrfX = superPos[0] - docAllWidth; else ovrfX = 0;
	if (superPos[1] > docAllHeight) ovrfY = superPos[1] - docAllHeight; else ovrfY = 0;
	
	//ставим и ресайзим большую картинку под малую
	big_pict_div.style.left = midPos[0] + 'px';
	big_pict_div.style.top = midPos[1] + 'px';
	
	big_pict.width = SmallWH[0];
	big_pict.height = SmallWH[1];
	
	enlargeInterval = setInterval(function(param1, param2, param3, param4, param5, param6) { return function() { zoomPlus(param1, param2, param3, param4, param5, param6)}}(big_pict_div, big_pict, SmallWH, OrigWH, ovrfX, ovrfY), 10); 
	//enlargeInterval = setInterval(function() { zoomPlus(big_pict_div, big_pict, SmallWH, OrigWH, ovrfX, ovrfY); }, 10);
}

function resetZoom(item) {
		item.parentNode.style.width = '0px';
		item.parentNode.style.height = '0px';
		item.style.margin = '0px';
		item.parentNode.style.backgroundColor = 'transparent';
		item.parentNode.style.border = '0px';
		item.parentNode.style.left = '-9000px';
}