$(window).load(function () {
	if ($.cookie("bannerbi") != 'firsttime') {

		var content = '<div id="dayDetailsBox" class="traffic_day_details" style=""><div id="phImg"><img src="Img/BI_radovi_na_cesti_FIN.jpg" usemap="#bannerMap"/>';
		content = content + '<map name="bannerMap">';
		content = content + '<area shape="rect" coords="405,25,421,41" id="closebtn" href="#"/>';
		content = content + '</map>';
		content = content + '</div>';


		var detailsBox = $(content);
		var mask = $('<div id="traffic_mask" class="traffic_mask">');
		var body = $(document.body);
		body.append(detailsBox);
		body.append(mask);

		var btnClose = detailsBox.find('#closebtn');
		btnClose.click(function (e) {
			detailsBox.stop(true, true).hide();
			mask.stop(true, true).hide();
		});

		btnClose.hover(
			function (e) {
				btnClose.addClass('hover');
			}, function (e) {
				btnClose.removeClass('hover');
			}
		);

		// Mask
		var mask = $('#traffic_mask');
		mask.show();

		// Details box
		var detailsBox = $('#dayDetailsBox');
		detailsBox.stop(true, true).hide();
		detailsBox.css({ width: '', height: '' });
		var w = 454; // image width
		var h = 294; // image height
		detailsBox.css({ width: 0, height: 0, fontSize: 1, top: $(window).height() / 2 + $(window).scrollTop(), left: $(window).width() / 2 + $(window).scrollLeft() });

		detailsBox
			.animate(
				{
					width: w + 'px',
					height: h + 'px',
					fontSize: 24,
					top: '-=' + w / 2 + 'px',
					left: '-=' + h / 2 + 'px'
				}, 500)
			.animate(
				{
					width: '-=10px',
					height: '-=10px',
					top: '+=5px',
					left: '+=5px'
				}, 100);


		$.cookie("bannerbi", "firsttime");

		if ($.browser.msie && parseInt($.browser.version) < 8) {
			detailsBox.find('img').click(function () {
				detailsBox.stop(true, true).hide();
				mask.stop(true, true).hide();
			});
		}
	}
});