jQuery.noConflict();

function MG_Edit_callback() {
}

(function($){

	// sortiraj slike po gridu
	$(function(){

		var $cubes = $(".cube");
		var $content = $(".gallery-item");
		var minDelay = 400;
		var maxDelay = 2500
		var duration = 300;
		
		$cubes.sort(randomSort);
		var contentCount = 0;
		$cubes.each(function(i, elm) {
			// postavi sadržaj
			var $cube = $(elm);
			if (!$cube.hasClass("fixed")) {
				$cube.html($content[contentCount++]);
			}
			
			// prikaži nakon random vremena
			setTimeout(
				function() {
					show($cubes[i], duration);
				},
				parseInt(Math.random() * maxDelay) + minDelay);
		});
		
	});

	function show(elm, duration) {
		$(elm).fadeIn(duration, function() {
			
			// scrollbars 
			var height = 390;
			if ($(".MenuBar").length == 0) {
				height = 430;
			}
			
			if ($(".ModuleTitle_MenuBar").length > 0) {
				height -= 102;
			}
			
			if ($(".TitleScroll", this).length > 0) {
				height -= 31;
			}
			
			$(".viewport", elm).height(height);
			
			$(".scrollable", elm).tinyscrollbar({
				sizethumb: 25,
				wheel: 10
			});
			
			// google maps
			initMap($("#googleMaps", elm));
		});
	}
	
	function randomSort(a, b) {
		return parseInt(Math.random() * 2);
	}
	
	// dodaj captione na slike
	$(function() {
		$(".gallery-item.big")
			.hover(
				function(){
					$(this)
						.find(".description")
							.stop(true,true)
							.delay(200)
							.fadeIn(300);
				},
				function(){
					$(this)
						.find(".description")
							.stop(true,true)
							.fadeOut(200);
				}
			)
			.bind("mousemove", function(e) {
				var $description = $(this).find(".description");
				var offsetX = e.offsetX;
				var offsetY = e.offsetY;
				
				if (!offsetX) {
					offsetX = e.layerX;
				}
				if (!offsetY) {
					offsetY = e.layerY;
				}
				
				$description.css({
					left: offsetX - $description.width() - 15,
					top: offsetY - $description.height() - 15
				});
			})
			.find("a").attr("title", "");
	});
	
	// dodaj fancybox na slike 
	var fancybox_options = {
				overlayOpacity: 0.8,
				overlayColor: '#333',
				transitionIn: 'fade',
				transitionOut: 'fade',
				speedIn: 800,
				speedOut: 500,
				hideOnContentClick: true,
				showCloseButton: false,
				titlePosition: 'inside'
			};
	$(function() {
		$(".gallery-item.big a, a.lightbox").each(function(){
			var $link = $(this);
			
			$link.fancybox(
				$.extend({}, fancybox_options, {
					onStart: function() {
								$link.find(".description")
									.stop(true,true)
									.attr("style", "");
							},
					titleFormat: function(title, currentArray, currentIndex, currentOpts) {
								return $link.find(".description").stop(true,true).html();
							}
				})
			);
			
		});
	});
	
	// dodaj fade efekt na linkove 
	$(function() {
		$(".gallery-item.small").hover(
			function() {
				$(this)
					.stop(true, true)
					.animate({ opacity: 0.5 }, 100);
			},
			function() {
				$(this)
					.stop(true, true)
					.animate({ opacity: 1 }, 400);
			}
		);
	});
	
	
	// galerija uređivanje 
	MG_Edit_callback = function() {
		$(".MG_Edit .item-list li").hover(
			function() {
				$("a.Delete, a.Edit", this).stop(true, true).attr("style", "").fadeIn();
			}, 
			function() {
				$("a.Delete, a.Edit", this).stop(true, true).fadeOut();
			}
		);
		
		$(".MG_Edit a.image-link").fancybox();
	};
	
	$(function() {
		MG_Edit_callback();
	});
	
	
	// virtualna šetnja
	var prvi_kat = '<map id="prvi_kat" name="prvi_kat">\
		<area shape="rect" alt="Soba I" coords="181,99,217,135" href="#soba-i" title="Soba I" />\
		<area shape="rect" alt="Soba II" coords="189,141,210,166" href="#soba-ii" title="Soba II" />\
		<area shape="rect" alt="Soba III" coords="221,153,248,184" href="#soba-iii" title="Soba III" />\
		<area shape="rect" alt="Soba IV" coords="221,129,248,151" href="#soba-iv" title="Soba IV" />\
		<area shape="rect" alt="Soba V" coords="221,70,248,123" href="#soba-v" title="Soba V" />\
		<area shape="poly" alt="Soba VI" coords="243,31,249,39,252,49,248,61,242,65,233,66,223,62,215,57,206,47,203,38,203,27,211,19,220,18,230,21" href="#soba-vi" title="Soba VI" />\
		<area shape="rect" alt="Soba VII" coords="159,20,193,47" href="#soba-vii" title="Soba VII" />\
		<area shape="rect" alt="Soba VIII" coords="134,19,157,47" href="#soba-viii" title="Soba VIII" />\
		<area shape="rect" alt="Soba IX" coords="90,20,129,46" href="#soba-ix" title="Soba IX" />\
		<area shape="rect" alt="Soba X" coords="52,19,89,47" href="#soba-x" title="Soba X" />\
		<area shape="rect" alt="Soba XI" coords="4,16,46,48" href="#soba-xi" title="Soba XI" />\
		<area shape="poly" alt="Soba XII" coords="36,50,36,79,73,79,73,67,65,59,54,59,54,50" href="#soba-xii" title="Soba XII" />\
		<area shape="poly" alt="Predvorje" coords="186,52,203,52,216,65,216,82,204,94,186,95,175,82,174,64" href="#predvorje" title="Predvorje" />\
		<area shape="poly" alt="Ulazno stubište" coords="169,60,131,61,125,65,122,74,124,82,130,87,170,87" href="#ulazno-stubiste" title="Ulazno stubište" />\
		<area shape="default" nohref="nohref" alt="" />\
		</map>';

	var drugi_kat = '<map id="drugi_kat" name="drugi_kat">\
		<area shape="rect" alt="Soba XII" coords="37,42,76,72" href="#soba-xii" title="Soba XII" />\
		<area shape="rect" alt="Soba XIII" coords="4,43,29,73" href="#soba-xiii" title="Soba XIII" />\
		<area shape="rect" alt="Soba XIV" coords="3,7,49,40" href="#soba-xiv" title="Soba XIV" />\
		<area shape="rect" alt="Soba XV" coords="55,10,92,39" href="#soba-xv" title="Soba XV" />\
		<area shape="rect" alt="Soba XVI" coords="94,11,160,39" href="#soba-xvi" title="Soba XVI" />\
		<area shape="rect" alt="Soba XVII" coords="166,11,205,39" href="#soba-xvii" title="Soba XVII" />\
		<area shape="rect" alt="Soba XVIII" coords="229,62,257,118" href="#soba-xviii" title="Soba XVIII" />\
		<area shape="rect" alt="Soba XIX" coords="229,124,257,155" href="#soba-xix" title="Soba XIX" />\
		<area shape="rect" alt="Soba XX" coords="244,155,257,206" href="#soba-xx" title="Soba XX" />\
		<area shape="rect" alt="Soba XXI" coords="229,212,261,256" href="#soba-xxi" title="Soba XXI" />\
		<area shape="rect" alt="Soba XXII" coords="229,184,243,206" href="#soba-xxii" title="Soba XXII" />\
		<area shape="rect" alt="Soba XXIII" coords="229,155,243,183" href="#soba-xxiii" title="Soba XXIII" />\
		<area shape="rect" alt="Soba XXIV" coords="196,136,216,165" href="#soba-xxiv" title="Soba XXIV" />\
		<area shape="rect" alt="Soba XXV" coords="188,92,225,130" href="#soba-xxv" title="Soba XXV" />\
		<area shape="poly" alt="Soba XXVI" coords="159,84,176,84,185,91,185,108" href="#soba-xxvi" title="Soba XXVI" />\
		<area shape="rect" alt="Soba XXVII" coords="127,43,145,49" href="#soba-xxvii" title="Soba XXVII" />\
		<area shape="rect" alt="Soba XXVIII" coords="129,52,175,81" href="#soba-xxviii" title="Soba XXVIII" />\
		<area shape="rect" alt="Soba XXIX" coords="96,43,122,74" href="#soba-xxix" title="Soba XXIX" />\
		<area shape="poly" alt="Most" coords="182,49,217,84,221,80,186,46" href="#most" title="Most" />\
		<area shape="default" nohref="nohref" alt="" />\
		</map>';
	
	var bg1 = 'prvi-kat.jpg';
	var dimensions1 = [269, 260];
	var hover1 = [
		'soba-i.jpg',
		'soba-ii.jpg',
		'soba-iii.jpg',
		'soba-iv.jpg',
		'soba-v.jpg',
		'soba-vi.jpg',
		'soba-vii.jpg',
		'soba-viii.jpg',
		'soba-ix.jpg',
		'soba-x.jpg',
		'soba-xi.jpg',
		'soba-xii.jpg',
		'predvorje.jpg',
		'ulazno-stubiste.jpg'
	]; 
		
	var bg2 = 'drugi-kat.jpg';
	var dimensions2 = [274, 260];
	var hover2 = [
		'soba-xii.jpg',
		'soba-xiii.jpg',
		'soba-xiv.jpg',
		'soba-xv.jpg',
		'soba-xvi.jpg',
		'soba-xvii.jpg',
		'soba-xviii.jpg',
		'soba-xix.jpg',
		'soba-xx.jpg',
		'soba-xxi.jpg',
		'soba-xxii.jpg',
		'soba-xxiii.jpg',
		'soba-xxiv.jpg',
		'soba-xxv.jpg',
		'soba-xxvi.jpg',
		'soba-xxvii.jpg',
		'soba-xxviii.jpg',
		'soba-xxix.jpg',
		'most.jpg',
	];
	
	$(function() {
		// init mapa
		var root = '/Portals/moderna-galerija/slike/virtualna-setnja/';
		var folder = root + 'o_nama-';
		var mapPrviKat = "#map-prvi-kat";
		var mapDrugiKat = "#map-drugi-kat";
		
		if ($("#map-prvi-kat-m").length > 0) {
			folder = root + 'marketing-';
			mapPrviKat += "-m";
			mapDrugiKat += "-m";
		}

		initImageMap(dimensions1, folder + 'prvi_kat/', bg1, hover1, prvi_kat, $(mapPrviKat));
		initImageMap(dimensions2, folder + 'drugi_kat/', bg2, hover2, drugi_kat, $(mapDrugiKat));

		// hover efekt
		$("map area").hover(
			function() {
				var id = $(this).attr("href");
				$(this).parent().parent().find(id)
					.stop(true, true)
					.fadeIn();
			}, 
			function() {
				$(this).parent().parent().find(".hover-image:visible")
					.stop(true, true)
					.fadeOut();
			}
		);
		
		// prikaži slike 
		$("map area").click(function() {
			var soba = $(this).attr("title");
			
			var elems = [];
			$(".slike-soba a:has(img[alt='"+soba+"'])").each(function(i, a) {
				elems.push({
					'href': jQuery(a).attr("href"),
					'title': jQuery(a).find(".description").html()
				});
			});
			
			// ručni poziv fancybox-a
			if (elems.length > 0) {
				$.fancybox(elems, fancybox_options);
			}
			
			return false;
		});
	});
	
	function initImageMap(dimensions, folder, bg, hover, map, $container) 
	{
		var $wrapper = $('<div class="map-wrapper"></div>')
					.width(dimensions[0])
					.height(dimensions[1]);

		$wrapper.append(
			$('<img />').attr('src', folder + bg)
		);
		
		for (i in hover) {
			$wrapper.append(
				$('<img />')
					.attr('src', folder + hover[i])
					.attr('id', hover[i].replace(".jpg", ""))
					.addClass('hover-image')
			);
		}
		
		$wrapper
			.append(map)
			.append(
				$('<img />')
					.attr('src', '/images/1x1.gif')
					.width(dimensions[0])
					.height(dimensions[1])
					.attr('usemap', '#' + $(map).attr('id'))
			);
	
		
		$container.html("").append($wrapper);
	}
	
})(jQuery);

function initMap(canvas) {
	if (!canvas || canvas.length == 0) 
		return;
		
	canvas.gMap({
		scrollwheel: true,
		markers: [
			{
				address: "Andrije Hebranga 1, Zagreb, Croatia",
				html: "<b>Moderna Galerija</b><div>Andrije Hebranga 1, Zagreb</div>"
			}
		],
		zoom: 15,
		address: "Andrije Hebranga 1, Zagreb, Croatia"
	});
}