var event;

function showTab(selector, tabId) {
	var tab = document.getElementById(tabId);
	var parent = tab.parentNode;
	var i;
	var tabBar = selector.parentNode.parentNode;

	$('div.visible', parent).removeClass('visible');
	$(tab).addClass('visible');

	$('li', tabBar).removeClass('selected');
	$(selector.parentNode).addClass('selected');

}


var chapterSelectorVisible = false;
function toggleChapterSelector(event, that) {
	if (window.event) {
		event = window.event
	}
	
	if (chapterSelectorVisible) {
		chapterSelectorVisible = false;
		$('.chaptHid', that.parentNode).hide();
	} else {
		chapterSelectorVisible = true;
		$('.chaptHid', that.parentNode).show();
		$(that).hide();
	}
	event.stopPropagation();
	return void(0);
}

function toggleDisplay(that, css) {
	var o = $('.' + css, that);
	if (o.css('display') == 'none') {
		o.css('display', 'block');
	} else {
		o.css('display', 'none');
	}
}

function toggleCssId(id, css) {
	$('#' + id).toggleClass(css);
}

// załaduj treść do tooltipa i wyświetl
function tooltip(event, value) {
	var tt = $('#TooltipFrame');
	// funkcja sprawdzajaca czy ukryc tooltip'a
	var out = function (event) {
		var w, h, o;
		
		w = tt.outerWidth();
		h = tt.outerHeight();
		o = {x: parseInt(tt.css('left')), y: parseInt(tt.css('top'))};
		
		//console.debug("w=" + w + ", h=" + h + ", x=" + o.x + ", y=" + o.y + ", px=" + event.pageX + ", py=" + event.pageY);
		
		if (event.pageX < o.x || event.pageY < o.y || event.pageX > w + o.x || event.pageY > h + o.y) {
			tt.fadeOut();
		}
	}
	
	if (tt.get(0).timeoutTimer) {
		clearTimeout(tt.get(0).timeoutTimer);
	}

	tt.stop(true, true);
	tt.html(value);
	tt.css('left', (event.pageX+4) + 'px').css('top', (event.pageY+4) + 'px');
	tt.get(0).timeoutTimer = setTimeout(function () {
		$(tt).stop(true, true);
		$(tt).timeoutTimer = false;
		$(tt).fadeOut();
	}, 7000);
	
	tt.unbind();
	$('*', tt.get(0)).mouseout(out);
	tt.mouseout(out);
	tt.fadeIn();
	//tt.mouseout(tooltip_out);
}


function briefPopup(that) {
	var o = $(that).position();
	var w = $(that).outerWidth();
	var p = $('div', that.parentNode).get(0);
	$('.bookbrief .popup').click();

	$(p).css('top', o.top+'px').css('left', (o.left+w) + 'px').fadeIn().one('click', function () { $(this).hide(); });
}

function addressEdit(that) {
	var node = that;
	while (node && !$(node).hasClass('dborder')) {
		node = node.parentNode;
	}

	$('.view', node).hide();
	$('.viewpart', node).hide();
	$('.form', node).fadeIn();
	$('.editpart', node).fadeIn();
}

function addressCancel(that) {
	var node = that;
	while (node && !$(node).hasClass('dborder')) {
		node = node.parentNode;
	}

	$('.form', node).hide();
	$('.editpart', node).hide();
	$('.view', node).fadeIn();
	$('.viewpart', node).fadeIn();
}


jQuery(document).ready(function () {
	/*
	 * Wyrównanie prawego zielonego paska do wysokości lewego zielonego paska
	 * w elib.
	 */
	var h = jQuery('#PartLeftMenu').innerHeight();
	jQuery('#PartRight').css('height', h + 'px');
	jQuery('#PartRightSep').css('top', (h + 5) + 'px');

	/*
	 * FAJNE RADIO DLA ELIB'a
	 * radioChecked - adres obrazka wybranego radio
	 * radioUnchecked - adres obrazka niewybranego radio
	 * radioWidth - szerokość radio
	 * radioHeight - wysokość radio
	 *
	 * Poniższa funkcja zamieni zwykłe <input type="radio"...> na ładne obrazki
	 * i stworzy element <input type="hidden"...> dla nich by formularze
	 * normalnie działały bez zmiany kodu.
	 *
	 * Obsłużone zostaną tylko radio znajdujące się w elementach z klasą CSS
	 * "radiogroup". Przykład:
	 *
	 * <div class="radiogroup">
	 *   <input type="radio" name="foo" value="1"/> Opcja 1<br/>
	 *   <input type="radio" name="foo" value="2" checked="checked"/> Opcja 2<br/>
	 * </div>
	 *
	 * Każdy nowy obrazek radio będzie posiadał klasę css "radio". Można jej
	 * użyć do dodatkowego "ustylowania" tych elementów.
	 *
	 * Istnieją 2 style radio, czerwony i zielony. Czerwony jest domyślnym stylem.
	 * Aby wybrać zielony, należy dodać klasę "green" do "radiogroup". Przykład:
	 *
	 * <div class="radiogroup green">
	 *   <input type="radio" name="foo" value="1"/> Opcja 1<br/>
	 *   <input type="radio" name="foo" value="2" checked="checked"/> Opcja 2<br/>
	 * </div>
	 *
	 * Ograniczenia:
	 *   Wszystkie <input type="radio"> w danym radiogroup muszą mieć jedną
	 *   nazwę. Jeżeli nazwy będą inne, pierwsza napotkana nazwa zostanie użyta
	 *   do wszystkich elementów!
	 *
	 * Kod wymaga biblioteki jQuery
	 */
	var radioRed = ['/static/img/radios.gif', '/static/img/radioe.gif'];
	var radioGreen = ['/static/img/radiogs.gif', '/static/img/radioge.gif'];
	var radioYellow = ['/static/img4/product_details/star.png', '/static/img4/product_details/no_star.png'];

	var radioWidth = 20;
	var radioHeight = 20;
	jQuery('.radiogroup').each(function () {
		var radioChecked;
		var radioUnchecked;
		var input = document.createElement('input');
		var hasValue = false;
		input.type = 'hidden';
		this.appendChild(input);

		// select correct radio set
		if ($(this).hasClass('green')) {
			radioChecked = radioGreen[0];
			radioUnchecked = radioGreen[1];
		} else if ($(this).hasClass('yellow')) {
			radioChecked = radioYellow[0];
			radioUnchecked = radioYellow[1];
		} else {
			radioChecked = radioRed[0];
			radioUnchecked = radioRed[1];
		}

		jQuery('input[type="radio"]', this).each(function () {

			// input nie został jeszcze nazwany
			if (!input.name) {
				input.name = this.name;
			}

			// input nie posiada jeszcze wartości
			if (hasValue == false) {
				// jeżeli ten element był domyślnie wybrany, zaznacz go.
				if (this.checked) {
					hasValue = true;
					input.value = this.value;
				}
			}
			
		});
		
		
		jQuery('input[type="radio"]', this).each(function () {

			// obrazek zastępujący radio
			var img = document.createElement('img');
			img.inputElem = input;
			img.value = this.value;
			img.width = radioWidth;
			img.height = radioHeight;
			img.alt = '';
			img.className = 'radio';

			// wybór odpowiedniego obrazka (checked/unchecked)
			if (input.value >= img.value) {
				img.src = radioChecked;
			} else {
				img.src = radioUnchecked;
			}

			// funkcja obsługująca kliknięcie
			jQuery(img).click(function (event) {
				if (this.inputElem.value != this.value) {
					// zmiana wartości
					this.inputElem.value = this.value;
					// odznacz wszystkie inne radio w tym radiogroup
					var current = this.value
					jQuery('.radio', img.inputElem.parentNode).each(function () {
						// ustaw obrazek unchecked
						if (this.value <= current)
						{
							this.src = radioChecked;
						} else {
							this.src = radioUnchecked;	
						}
						
						
					})
					// ustaw obrazek checked
					//this.src = radioChecked;
					//alert(jQuery('input[name="foo"]').get(0).value);
				}
			});

			// zastąp oryginalny input wygenerowanym obrazkiem
			this.parentNode.replaceChild(img, this);
		});
	});

	/*
	 * FAJNE CHECKBOX DLA ELIB
	 *
	 */
/*	var checkGreen = ['/static/img/cbon.png', '/static/img/cboff.png'];
	jQuery('input[type="checkbox"]').each(function () {
		var parent = this.parentNode;
		var hidden = document.createElement('input');
		var img = document.createElement('img');

		hidden.type = 'hidden';
		hidden.name = this.name;
		hidden.value = this.checked ? 'On' : '';

		if (hidden.value) {
			img.src = checkGreen[0];
		} else {
			img.src = checkGreen[1];
		}
		img.width=16;
		img.height=16;
		img.alt='';
		img.input = hidden;
		img.className = 'checkbox';

		jQuery(img).click(function (event) {
			if (this.input.value) {
				// uncheck
				this.input.value = '';
				this.src = checkGreen[1];
			} else {
				this.input.value = "On";
				this.src = checkGreen[0];
			}
		});
		
		this.parentNode.appendChild(hidden);
		this.parentNode.replaceChild(img, this);
	});
*/

	// inicjalizuje tooltipy
	$('.tt').each(function () {
		var alt;
		var eventtype;
		if (this.nodeName == 'IMG') {
			alt = this.alt;
			this.alt = '';
			eventtype = 'click';
		} else if (this.nodeName == 'A') {
			alt = this.title;
			this.title = '';
			eventtype = 'mouseenter';
		}
		var p = alt.indexOf(':');
		var type, name;
		if (p != -1) {
			type = alt.substr(0, p);
			name = alt.substr(p+1);
		} else {
			type = 'src';
			name = alt;
		}
		this.alt = "";
		$(this)[eventtype](function (event) {
			switch (type) {
			case 'html':
				tooltip(event, name);
				break;
			case 'src':
				tooltip(event, $('#' + name).html());
				break;
			case 'js':
				if (window[name]) {
					tooltip(event, window[name]());
				}
				break;
			}
		});
	});
});