$(function() {
	var change_medium_picture = function(cont, e) {
		if(e.target.nodeName == 'IMG') {
			var src = e.target.src.replace(/^.*\.ru/, ''), cont_id = cont.get(0).id.replace(/[^0-9]+/, '');
			
			$('.product img', cont).hide();
			var ph = photos[cont_id];
			
			for(var i in ph) {
				if(ph[i].small == src) {
					$(".product img", cont).filter(function(index){
						return this.src.replace(/^.*\.ru/, '') == ph[i].med;
					}).show();
				}
			}
		}
	}
	
	var roll_pictures = function(cont, e) {
		var dir = -1, loco = $('.carbody_cont img:first-child', cont).get(0), i_count = $('.carbody_cont img', cont).length;
		
		if(e !== undefined) {
			if(e.target) dir = (e.target.className == 'car_top_arr') ? 0 : 1;
			else dir = e;
		}
		
		if(!loco.style.marginTop) loco.style.marginTop = '0px';
		
		var mrg = parseInt(loco.style.marginTop);
		
		if(dir >=0) {
			if(dir == 1 && mrg > -(i_count - 3) * 85) loco.style.marginTop = mrg - 85 + 'px';
			if(dir == 0 && mrg < 0) loco.style.marginTop = mrg + 85 + 'px';
		}
		
		mrg = parseInt(loco.style.marginTop);
		$('.car_top_arr, .car_down_arr', cont).css('visibility', 'visible');
		
		if(mrg == 0) {
			$('.car_top_arr', cont).css('visibility', 'hidden');
		}
		if(mrg <= -(i_count - 3) * 85) {
			$('.car_down_arr', cont).css('visibility', 'hidden');
		}
		
		return i_count;
	}
	
	var roll_by_wheel = function(cont, e) {
		count = roll_pictures(cont, e.delta == 1 ? 0 : 1);
		return (count <= 3);
	}
	
	var make_picture = function(id) {
		var cont = $('#' + id);
		$('.carbody_cont', cont).click(function(e){ change_medium_picture(cont, e); }).wheel(function(e){ return roll_by_wheel(cont, e); });
		$('.car_top_arr, .car_down_arr', cont).click(function(e){ roll_pictures(cont, e); });
		
		if($('.carbody_cont img', cont).length < 2) {
			$('.carousel', cont).hide();
			cont.css('width', 353);
		}		
		
		roll_pictures(cont);
	}
	
	$('.product_cont').each(function(){
		make_picture(this.id);
		//$('.product a', this).dblclick(function(){return false;});
	});
	
	/*
	<img src='/images/bcartopleft.png' />
	<img src='/images/bcar-toparrow.png' class='car_top_arr' />
	<img src='/images/bcardownleft.png' />
	<img src='/images/bcar-downarrow.png' class='car_down_arr' />
	*/
	
	//Work with pictures list
	var make_p_card = function(id) {
		var p_cont = $("<div class='baloon1' id='p" + id + "'></div>"), ph = photos[id];
		var code = "<a href='/catalog/" + id + "/'><h3>" + ph.NAME + "</h3></a><div class='product'><a href='/catalog/" + id + "/'>";
		code += "</a></div> \
		<div class='carousel'> \
			<div class='cartop'></div> \
			<div class='carbody'> \
			<div class='carbody_cont'></div> \
			</div> \
			<div class='carbottom'></div> \
		</div>";
		if (ph.ARTIKUL != null) {
			code += "<div style='text-align: center; color: gray; font-size: 9pt;'>"+ ph.ARTIKUL +"</div>";
		}
		p_cont.html(code);
		p_cont.appendTo(document.body);
		
		var cbc = $('.carbody_cont', p_cont);
		var pc = $('.product a', p_cont);
		var img = null;
		var ph_length = 0;
		for(var i in ph) {
			if (i == 'NAME') continue;
			if (i == 'ARTIKUL') continue;
			
			img = $('<img />');
			img.attr('src', ph[i].small);
			cbc.append(img);
			
			img = $('<img />');
			img.attr('src', ph[i].med);
			pc.append(img);	

			ph_length++;
		}
		
		$('<img />').attr('src', '/images/bcartopleft.png').appendTo($('.cartop', p_cont));
		$('<img />').attr('src', '/images/bcardownleft.png').appendTo();
		
		$('.carbody_cont', p_cont)
			.before($('<img />').attr('src', '/images/bcar-toparrow.png').addClass('car_top_arr'))
			.after($('<img />').attr('src', '/images/bcar-downarrow.png').addClass('car_down_arr'));
		
		if(ph_length < 2) {
			$('.carousel', p_cont).hide();
			p_cont.css('width', 353);
		}
		
		//Align by picture
		var off = $('#sp' + id).offset();
		off.top += 178/2;
		off.left += 187/2;
		
		p_cont.css({top: off.top - p_cont.outerHeight()/2, left: off.left - p_cont.outerWidth()/2});
		
		p_cont.hover(false, function(){ 
			$(this).hide(); 
		});
		
		make_picture('p' + id);
		return p_cont;
	}
	
	var show_p_card = function(e) {
		var id = e.target.id.replace(/[^0-9]+/, '');
		if(!id) return false;
		
		var p_cont = $('#p' + id);
		if(p_cont.length == 0) p_cont = make_p_card(id);
		$('.baloon1').hide();
		p_cont.show();
		
		return false;
	}
	
	$('.sproduct img').mouseover(show_p_card);
});