/*global ActiveXObject: false, CScript: false, Debug: false, Enumerator: false, System: false, VBArray: false, WScript: false */
/*global clearInterval: false, clearTimeout: false, document: false, event: false, frames: false, history: false, Image: false, location: false, name: false, navigator: false, Option: false, parent: false, screen: false, setInterval: false, setTimeout: false, window: false, XMLHttpRequest: false, alert: false, console: false*/
/*global jQuery: false, $:false*/
/*global G_vmlCanvasManager: false*/
(function ($) {
	if ($().walbum) {
		return false;
	}
	$.fn.walbum = function (settings) {
		var texts = {
				"en": {
					"close": "Close",
					"previous": "Previous",
					"next": "Next",
					"zoom": "Zoom",
					"visit": "Visit",
					"by": "by",
					"play": "Play",
					"buy": "Buy"
				},
				"fr": {
					"close": "Fermer",
					"previous": "Précédent",
					"next": "Suivant",
					"zoom": "Zoom",
					"visit": "Visiter",
					"by": "par",
					"play": "Lecture",
					"buy": "Acheter"
				},
				"de": {
					"close": "Schließen",
					"previous": "Vorherige",
					"next": "Nächste",
					"zoom": "Zoom",
					"visit": "Besuch",
					"by": "von",
					"play": "Play",
					"buy": "Kaufen"
				},
				"es": {
					"close": "Cerrar",
					"previous": "Anterior",
					"next": "Siquiente",
					"zoom": "Ampilar",
					"visit": "Visitar Sitio",
					"by": "por",
					"play": "Play",
					"buy": "comprar"
				}
			},
			getLang = function () {
				var detectedLang = ((navigator.language) ? navigator.language : navigator.userLanguage).split("-").shift(),
					availableLangs = [],
					lang;
				$.each(texts, function (t) {
					availableLangs.push(t);
				});
				lang = $.inArray(detectedLang, availableLangs) ? detectedLang : "en";
				return lang;
			},
			beforeIE9test = function () {
				return ($.browser.msie && $.browser.version <= 9) ? true : false;
			},
			beforeIE9 = beforeIE9test(),
			config = {
				css: "css/jstyle.css",
				url: "", // path to images allowing to put short paths for each ones
				artist: "",
				title: "",
				prev: "", // a link to visit when user clicks on prev in dialog box when the active item is the first one
				next: "", // a link to visit when user clicks on next in dialog box when the active item is the last one
				data: [
					{
						title:"",
						artist:"",
						link:"", // url for iframe
						directLink:"", // url for "visit" link
						thumbnail:"",
						buy:""
					}
				],
				lang: settings.lang || getLang(), // if set, can force the use of the specified language
				cssScope: "wlbm",
				displayType: "thumbs", // thumbs, cover, slides
				socialLinks: true,
				logo: true,
				autostart: 0,// 0 if no autostart, or item index to autostart with this item
				thumbs: {
					artist: true,
					title: {
						display: true,
						color: "#000000",
						size: 33
					},
					minCols: 0,
					minRows: 0,
					maxCols: 0,
					maxRows: 0,
					orientation: "portrait", // portrait or landscape
					items: {
						title: true,
						artist: true,
						visit: true,
						zoom: true,
						click: false, // true, to be able to click on the entire item instead of just zoom 
						overlay: {
							display: false,
							position: "bottom",// top, bottom
							backgroundColor: "#000000",
							fontColor: "#ffffff",
							opacity: 0.7
						},
						width: 260,
						height: 260,
						border: {
							width: 8,
							radius: 20,
							color: "#000000"
						},
						padding: 10
					}
				},
				cover: {
					img: "",
					title: true,
					artist: true,
					overlay: {
						display: true,
						backgroundColor: "#000000",
						fontColor: "#ffffff",
						opacity: 0.7,
						fontSize: 14,
						position: "bottom",// top, bottom
						autoHide: true
					},
					play: {
						display: true,
						position: "topRight",// topLeft, topRight, bottomRight, bottomLeft
						backgroundColor: "#000000",
						fontColor: "#ffffff"
					}
				},
				border: {
					color: "#000000",
					width: 8,
					radius: 20
				},
				background: {
					image: {
						url: "",
						position: "center center",
						repeat: "no-repeat",
						attachment: "scroll"
					},
					color: "",
					gradient: {
						type: "radial",
						start: "#ffffff",
						end: "#919B73"
					}
				},
				dialog: {
					fullscreen: false,
					width: 0.85,
					height: 0.85,
					w: 0,
					h: 0,
					fontColor: "#ffffff",
					fontHoverColor: "#aaaaaa",
					border: {
						color: "#000000",
						width: 8,
						radius: 20
					},
					shadow: {
						color: "#ffffff",
						size: 40
					},
					overlay: {
						color: "#000000",
						opacity: 0.6,
						display: true
					}
				}
			},
			getTexts = function (l) {
				config.texts = texts[l];
				$.each(texts, function (t, v) {
					if (settings.texts) {
						$.extend(v, settings.texts[t])
						config.texts[t] = v;
					}
				});
			},
			wlbm = this,
			dialogSize = function () {
				var W = $(window).width(),
					H = $(window).height();
				config.dialog.w = (config.dialog.width > 1) ? config.dialog.width : parseInt((W * config.dialog.width) - config.dialog.border.width * 2, 10);
				config.dialog.h = (config.dialog.height > 1) ? config.dialog.height : parseInt((H * config.dialog.height) - config.dialog.border.width * 2, 10);
				if (config.dialog.w > (W - config.dialog.shadow.size) || config.dialog.w > (H - config.dialog.shadow.size)) {
					config.dialog.shadow.size = 0;
				}
				if (wlbm.box) {
					wlbm.box.dialog("option", "width", config.dialog.w);
					wlbm.box.dialog("option", "height", config.dialog.h);
				}
			},
			roundedBorders = function (w, sides) {
				// TODO: implement sides
				if (w && !beforeIE9) {
					var px = w + "px";
					if (!sides) {
						return {
							"-moz-border-radius": px,
							"-webkit-border-radius": px,
							"-khtml-border-radius": px,
							"border-radius": px,
							"-moz-background-clip": "padding",
							"-webkit-background-clip": "padding-box",
							"background-clip": "padding-box"
						};
					}
				} else {
					return {};
				}
			},
			boxShadows = function () {
				if (!beforeIE9) {
					var v = "0px 0px " + config.dialog.shadow.size + "px " + config.dialog.shadow.color;
					return {
						"-moz-box-shadow": v,
						"-webkit-box-shadow": v,
						"box-shadow": v
					};
				} else {
					return {};
				}
			},
			overlayStyle = function () {
				return {
					backgroundColor : config.dialog.overlay.color,
					opacity: config.dialog.overlay.opacity
				};
			},
			cursorOverlay = "<div class=\"cursorOverlay\">",
			drawCloseIcon = function (ctx, color, bgcolor) {
				ctx.clearRect(0, 0, 22, 22);
				ctx.fillStyle   = bgcolor;
				ctx.strokeStyle   = color;
				ctx.lineWidth   = 2;
				ctx.beginPath();
				ctx.arc(11, 11, 10, 0, Math.PI * 2, true);
				ctx.closePath();
				ctx.fill();
				ctx.stroke();
				ctx.beginPath(); 
				ctx.moveTo(6, 6);
				ctx.lineTo(16, 16);
				ctx.moveTo(6, 16);
				ctx.lineTo(16, 6);
				ctx.stroke();
				ctx.closePath();
			},
			makeCloseIcon = function (close) {
				var canvas, ctx;
				if (close.find("canvas").length > 0) {
					canvas = close.find("canvas")[0];
				} else {
					canvas = document.createElement("canvas");
					close.append(canvas);
					canvas.setAttribute("width", 22);
					canvas.setAttribute("height", 22);
					close.mouseenter(function () {
						drawCloseIcon(ctx, config.dialog.border.color, config.dialog.fontColor);
						close.find("span").show();
					}).mouseleave(function () {
						drawCloseIcon(ctx, config.dialog.fontColor, config.dialog.border.color);
						close.find("span").hide();
					});
					if (beforeIE9) {
						close.append(cursorOverlay);
					}
				}
				if (typeof G_vmlCanvasManager !== 'undefined') { 
					G_vmlCanvasManager.initElement(canvas); 
				}
				if (canvas.getContext) {
					ctx = canvas.getContext("2d");
					drawCloseIcon(ctx, config.dialog.fontColor, config.dialog.border.color);
				}
			},
			getSlide = function (n) {// slides navigation method (needs slide's index)
				wlbm.frame.attr("src", "").hide("fade", 1000, function () {
					wlbm.frame.attr("src", wlbm.list[n].link).show("fade", 1000);
					wlbm.current = n;
				});
			},
			openWlbmBox = function (i) {// open wlbm.box method
				wlbm.frame.attr("src", wlbm.list[i].link);
				wlbm.box.dialog("open");
				getSlide(i);
			},
			prepareDialog = function () {
				// prepare dialog box
				if (config.dialog.fullscreen || config.displayType === "slides") {
					config.dialog.fullscreen = true;
					config.dialog.width = 1;
					config.dialog.height = 1;
					config.dialog.border.width = 0;
					config.dialog.border.radius = 0;
					config.dialog.shadow.size = 0;
					config.dialog.overlay.display = false;
				}

				// calculate dialog size according to window size
				dialogSize();

				// wlbm.box is .ui-dialog-content
				wlbm.box = $("<div style=\"width:" + config.dialog.w + "px;height:" + config.dialog.h + "px;\"><iframe src=\"\" frameborder=\"0\" hspace=\"0\" allowTransparency=\"true\"></iframe></div>").dialog({
					modal: config.dialog.overlay.display,
					closeText: config.texts.close,
					dialogClass: "walbum",
					autoOpen: false,
					width: config.dialog.w,
					height: config.dialog.h,
					create: function () {
						// wlbm.dialog is .ui-dialog
						var box = $(this);
						wlbm.dialog = box.parent();

						// dialog styles
						wlbm.dialogStyle = {
							position: "absolute",
							border: config.dialog.border.width + "px solid " + config.dialog.border.color
						};
						$.extend(wlbm.dialogStyle, roundedBorders(config.dialog.border.radius));
						if (config.dialog.shadow.size) {
							$.extend(wlbm.dialogStyle, boxShadows());
						}
						// apply style and css scope to dialog box
						wlbm.dialog.css(wlbm.dialogStyle).addClass(config.cssScope + " " + config.cssScope + "Loading");

						// dialog close button
						if (config.displayType === "slides") {
							box.prev().remove();
						} else {
							wlbm.close = wlbm.dialog.find(".ui-dialog-titlebar-close");
							wlbm.close.css({
								top: -config.dialog.border.width + (!config.dialog.fullscreen ? -8 : 5),
								left: -config.dialog.border.width + (!config.dialog.fullscreen ? -8 : 5)
							});
							wlbm.dialog.find(".ui-dialog-titlebar").replaceWith(wlbm.close);
							wlbm.close.find("span").css({
								color: config.dialog.fontColor,
								backgroundColor: config.dialog.border.color,
								border: "1px solid " + config.dialog.fontColor
							});
							makeCloseIcon(wlbm.close);
						}

						// iframe shortcut
						wlbm.frame = box.find("iframe");
						wlbm.frame.css(roundedBorders(config.dialog.border.radius - config.dialog.border.width));

						// prepare prev/next buttons in dialog box
						if (wlbm.list.length > 1) {
							wlbm.controls = {
								style: {
									color: config.dialog.fontColor,
									backgroundColor: config.dialog.border.color
								},
								hoverStyle: {
									color: config.dialog.border.color,
									backgroundColor: config.dialog.fontColor
								}
							};
							box.append("<div class=\"prev\"><<span>" + config.texts.previous + "</span></div><div class=\"next\">><span>" + config.texts.next + "</span></div>")
								.find(".prev, .next")
								.css(wlbm.controls.style)
								.mouseenter(function () {
									$(this).css(wlbm.controls.hoverStyle);
								})
								.mouseleave(function () {
									$(this).css(wlbm.controls.style);
								})
								.bind($.uEvent, function () {
									var direction = $(this).is(".next"),
										n = wlbm.current + (direction ? 1 : -1);
									if (direction) {
										if (n === wlbm.list.length && config.next) {
											document.location.href = config.next; 
										} else {
											getSlide(n === wlbm.list.length ? 0 : n);
										}
									} else {
										if (n < 0  && config.prev) {
											document.location.href = config.prev; 
										} else {
											getSlide(n >= 0 ? n : wlbm.list.length - 1);
										}
									}
								});
						}
					},
					open: function () {
						if (beforeIE9) {
							$("body").css("overflow-x", "hidden");
						}
						if (config.dialog.overlay.display) {
							$(".ui-widget-overlay").css(overlayStyle()).addClass(config.cssScope).bind($.uEvent, function () {
								wlbm.box.dialog("close");
							});
						}
					},
					close: function () {
						if (beforeIE9) {
							$("body").css("overflow-x", "auto");
						}
						wlbm.frame.attr("src", "");
					}
				});
				if (!beforeIE9) {
					wlbm.box.dialog("option", "hide", 'drop');
					wlbm.box.dialog("option", "show", 'drop');
				} else {
					wlbm.box.dialog("option", "hide", 'fade');
					wlbm.box.dialog("option", "show", 'fade');
				}
			},
			drawPlayIcon = function (ctx, color, bgcolor) {
				ctx.clearRect(0, 0, 22, 22);
				ctx.fillStyle   = bgcolor;
				ctx.beginPath();
				ctx.arc(11, 11, 10, 0, Math.PI * 2, true);
				ctx.closePath();
				ctx.fill();
				ctx.fillStyle   = color;
				ctx.beginPath(); 
				ctx.moveTo(8, 6);
				ctx.lineTo(16, 11);
				ctx.lineTo(8, 16);
				ctx.lineTo(8, 6);
				ctx.fill();
				ctx.closePath();
			},
			makePlayIcon = function (play) {
				var canvas, ctx;
				if (play.find("canvas").length > 0) {
					canvas = play.find("canvas")[0];
				} else {
					canvas = document.createElement("canvas");
					play.append(canvas);
					canvas.setAttribute("width", 22);
					canvas.setAttribute("height", 22);
					if (beforeIE9) {
						play.append(cursorOverlay);
					}
					wlbm.wrap.mouseenter(function () {
						drawPlayIcon(ctx, config.cover.play.fontColor, config.cover.play.backgroundColor);
						wlbm.wrap.play.css({
							backgroundColor: config.cover.play.fontColor,
							color: config.cover.play.backgroundColor,
							borderColor: config.cover.play.backgroundColor
						});
					}).mouseleave(function () {
						drawPlayIcon(ctx, config.cover.play.backgroundColor, config.cover.play.fontColor);
						wlbm.wrap.play.css({
							backgroundColor: config.cover.play.backgroundColor,
							color: config.cover.play.fontColor,
							borderColor: config.cover.play.fontColor
						});
					});
				}
				if (typeof G_vmlCanvasManager !== 'undefined') { 
					G_vmlCanvasManager.initElement(canvas); 
				}
				if (canvas.getContext) {
					ctx = canvas.getContext("2d");
					drawPlayIcon(ctx, config.cover.play.backgroundColor, config.cover.play.fontColor);
				}
			},
			makeCoverOverlay = function () {
				var coverOverlay = "",
					coverOverlayStyle = {},
					cursorStatus = false,
					autohide = function () {
						setTimeout(function () {
							if (!cursorStatus) {
								coverOverlay.hide("drop", {direction: (config.cover.overlay.position === "top" ? "up" : "down")});
							}
						}, 5000);
					};
				if (config.cover.title) {
					coverOverlay += config.title;
				}
				if (config.cover.artist) {
					coverOverlay += (config.cover.title ? " " + config.texts.by + " " : "") + config.artist;
				}
				if (coverOverlay) {
					// TODO : rounded borders
					switch (config.cover.overlay.position) {
					case "top":
						coverOverlayStyle = {top: 0};
						break;
					case "bottom":
						coverOverlayStyle = {bottom: 0};
						break;
					}
					coverOverlay = $("<div class=\"" + config.cssScope + "Overlay\">" + coverOverlay + "</div>").css(
						$.extend(coverOverlayStyle, {
							backgroundColor: config.cover.overlay.backgroundColor,
							color: config.cover.overlay.fontColor,
							opacity: config.cover.overlay.opacity,
							width: wlbm.coverImg.width - 20,
							fontSize: config.cover.overlay.fontSize
						})
					);
					wlbm.wrap.append(coverOverlay);
					if (config.cover.overlay.autoHide) {
						autohide();
						wlbm.wrap.mouseenter(function () {
							if (!cursorStatus) {
								coverOverlay.show("drop", {direction: (config.cover.overlay.position === "top" ? "up" : "down")}, function () {
									coverOverlay.css({
										opacity: config.cover.overlay.opacity
									});
								});
							}
							cursorStatus = true;
						}).mouseleave(function () {
							cursorStatus = false;
							autohide();
						});
					}
				}
			},
			makeCoverPlay = function () {
				var coverPlayStyle = {};
				switch (config.cover.play.position) {
				case "topLeft":
					coverPlayStyle = {top: 15, left: 15};
					break;
				case "topRight":
					coverPlayStyle = {top: 15, right: 15};
					break;
				case "bottomRight":
					coverPlayStyle = {bottom: 15, right: 15};
					break;
				case "bottomLeft":
					coverPlayStyle = {bottom: 15, left: 15};
					break;
				}
				$.extend(coverPlayStyle, {
					backgroundColor: config.cover.play.backgroundColor,
					color: config.cover.play.fontColor,
					border: "1px solid " + config.cover.play.fontColor
				});
				wlbm.wrap.play = $("<div class=\"" + config.cssScope + "Play\"><div>" + config.texts.play + "</div></div>").css(coverPlayStyle);
				makePlayIcon(wlbm.wrap.play);
				wlbm.wrap.append(wlbm.wrap.play);
			},
			centeringCover = function () {
				var wrapStyle = {}, top, left;
				if (wlbm.originHeight === "auto") {
					wrapStyle = {
						position: "relative",
						margin: "0 auto"
					};
				} else {
					top = (wlbm.height() - (wlbm.coverImg.height + (config.border.width * 2))) / 2;
					left = (wlbm.width() - (wlbm.coverImg.width + (config.border.width * 2))) / 2;
					wrapStyle = {
						position: "absolute",
						top: top < 0 ? 0 : top,
						left: left < 0 ? 0 : left
					};
					wlbm.css("overflow", "auto");
				}
				wlbm.wrap.css(wrapStyle);
			},
			makeCover = function () {
				var wrapStyle = {},
					loading = function () {
						setTimeout(function () {
							if (wlbm.coverImg.complete) {
								centeringCover(wlbm.coverImg);
								$.extend(wrapStyle, roundedBorders(config.border.radius));
								wlbm.wrap.css(
									$.extend(wrapStyle, {
										width: wlbm.coverImg.width,
										height: wlbm.coverImg.height,
										cursor: "pointer",
										border: config.border.width + "px solid " + config.border.color,
										background: "#000 url(" + wlbm.coverImg.src + ") 0 0 no-repeat"
									})
								).bind($.uEvent, function () {
									openWlbmBox(0);
								});
				
								if (config.cover.overlay.display) {
									makeCoverOverlay(wlbm.coverImg);
								}
								if (config.cover.play.display) {
									makeCoverPlay();
								}
								if (config.autostart) {
									openWlbmBox(config.autostart-1);
								}
							} else {
								loading();
							}
						}, 50);
					};
				wlbm.coverImg = new Image();
				wlbm.coverImg.src = config.url + config.cover.img;
				loading();
			},
			writeTitle = function () {
				if (config.thumbs.artist || config.thumbs.title.display) {
					var artist = config.thumbs.artist && config.artist ? (config.thumbs.title.display && config.title ? "<br />" + config.texts.by + " " : "") + config.artist : "",
						title = $("<h2>" + (config.thumbs.title.display && config.title ? "\"" + config.title + "\"" : "") + artist + "</h2>").css({
							color : config.thumbs.title.color,
							fontSize : config.thumbs.title.size
						});
					wlbm.wrap.append(title);
					document.title = !document.title ? "Viinyl - " + title.html().replace("<br>", " ").replace("<BR>", " ") : document.title;
				}
			},
			eventSide = function (ev) {
				var targetOffset = $(ev.target).offset(),
					x = ev.pageX - targetOffset.left,
					y = ev.pageY - targetOffset.top,
					side;
				x = Math.round((x * 100) / ev.currentTarget.offsetWidth);
				y = Math.round((y * 100) / ev.currentTarget.offsetHeight);
				if (x > 50) {
					if (y > 50) {
						if (x < y) {
							side = "down";
						} else {
							side = "right";
						}
					} else {
						x = 100 - x; 
						if (x < y) {
							side = "right";
						} else {
							side = "up";
						}
					}
				} else {
					if (y > 50) {
						y = 100 - y;
						if (x < y) {
							side = "left";
						} else {
							side = "down";
						}
					} else {
						if (x < y) {
							side = "left";
						} else {
							side = "up";
						}
					}
				}
				return side;
			},
			centeringThumbs = function () {
				wlbm.wrap.css({
					width: "auto",
					height: "auto"
				});
				var itemXtra = (config.thumbs.items.border.width * 2) + (config.thumbs.items.padding * 2),
					itemWidth = config.thumbs.items.width + itemXtra,
					itemHeight = config.thumbs.items.height + itemXtra,
					titleHeight = wlbm.wrap.find("h2").outerHeight(true),
					containerWidth = wlbm.width(),
					containerHeight = wlbm.height(),
					cols = Math.floor(containerWidth / itemWidth),
					rows =  Math.ceil(wlbm.list.length / cols),
					wrapWidth, 
					wrapHeight,
					top,
					left;
				if (config.thumbs.orientation === "landscape") {
					rows = Math.floor(containerHeight / itemHeight);
					cols =  Math.ceil(wlbm.list.length / rows);
				}
				if (config.thumbs.minRows && rows < config.thumbs.minRows) {
					rows = config.thumbs.minRows;
					cols = Math.ceil(wlbm.list.length / rows);
				}
				if (config.thumbs.minCols && cols < config.thumbs.minCols) {
					cols = config.thumbs.minCols;
					rows =  Math.ceil(wlbm.list.length / cols);
				}
				if (config.thumbs.maxRows && rows > config.thumbs.maxRows) {
					rows = config.thumbs.maxRows;
					cols = Math.ceil(wlbm.list.length / rows);
				}
				if (config.thumbs.maxCols && cols > config.thumbs.maxCols) {
					cols = config.thumbs.maxCols;
					rows =  Math.ceil(wlbm.list.length / cols);
				}
				
				wrapWidth = itemWidth * cols;
				wrapHeight = titleHeight + (itemHeight * rows);
				top = (containerHeight - wrapHeight) / 2;
				left = (containerWidth - wrapWidth) / 2;
				top = top < 0 ? 0 : top;
				left = left < 0 ? 0 : left;
			
				wlbm.wrap.css({
					position: "absolute",
					width: wrapWidth,
					left: left,
					top: top
				});
				if (wlbm.originHeight === "auto") {
					wlbm.height(wrapHeight);
				}

				if ((wrapHeight > containerHeight || wrapWidth > containerWidth) && wlbm.originHeight !== "full") {
					// wlbm.css({overflow: "auto"});
				} else if ((wrapHeight > containerHeight || wrapWidth > containerWidth) && wlbm.originHeight === "full") {
					wlbm.height(wrapHeight);
				}
			},
			makeThumbs = function () {
				var itemsRoundStyle = roundedBorders(config.thumbs.items.border.radius),
					itemsBorderStyle = $.extend(itemsRoundStyle, {
						top: config.thumbs.items.padding,
						left: config.thumbs.items.padding,
						width: config.thumbs.items.width,
						height: config.thumbs.items.height,
						border: config.thumbs.items.border.width + "px solid " + config.thumbs.items.border.color
					}),
					itemsContainerStyle = {
						width: config.thumbs.items.width + (config.thumbs.items.border.width * 2),
						height: config.thumbs.items.height + (config.thumbs.items.border.width * 2),
						padding: config.thumbs.items.padding
					},
					itemsTitleOverlayStyle = {
						left: config.thumbs.items.border.width + config.thumbs.items.padding,
						backgroundColor: config.thumbs.items.overlay.backgroundColor,
						color: config.thumbs.items.overlay.fontColor,
						opacity: config.thumbs.items.overlay.opacity,
						width: config.thumbs.items.width - 20
					},
					itemsInfoWrapStyle = itemsBorderStyle ;
				if (config.thumbs.items.overlay.display) {
					switch (config.thumbs.items.overlay.position) {
					case "top":
						$.extend(itemsTitleOverlayStyle, {top: config.thumbs.items.border.width + config.thumbs.items.padding});
						break;
					case "bottom":
						$.extend(itemsTitleOverlayStyle, {bottom: config.thumbs.items.border.width + config.thumbs.items.padding});
						break;
					}
				}
				if (config.thumbs.items.click) {
					config.thumbs.items.zoom =false;
					config.thumbs.items.visit = false;
					$.extend(itemsContainerStyle, {
						cursor: "pointer"
					});
				}

				// insert title and artist name
				writeTitle();


				// build walbum thumbs (ul)
				wlbm.thumbs = $("<ul>");

				// insert items
				wlbm.loadedItems = 0;
				$.each(wlbm.list, function (i, item) {
					var artist, title;
					// item container (li)
					item.container = $("<li>").css(itemsContainerStyle);

					item.canvasWrap = $("<div class=\"canvasWrap " + config.cssScope + "Loading\"></div>").css(
						$.extend(item.canvasWrapStyle, itemsBorderStyle, {
							backgroundImage: "url(" + config.url + item.thumbnail + ")"
						})
					);
					item.canvasMask = $("<div class=\"canvasMask\"></div>").css(itemsBorderStyle);
					item.infoWrap = $("<div class=\"infoWrap\"></div>").css(itemsInfoWrapStyle);
					item.buttons = $("<div class=\"buttons\"></div>");

					if (config.thumbs.items.title && item.title) { 
						item.infoWrap.append("<h3>" + item.title + "</h3>");
					}
					if (config.thumbs.items.artist && item.artist) {
						item.infoWrap.append("<h4>" + (config.thumbs.items.title ? config.texts.by + " " : "") + item.artist + "</h4>");
					}

					item.buttons.count = 0;
					item.buttons.count += config.thumbs.items.zoom ? 1 : 0;
					item.buttons.count += config.thumbs.items.visit ? 1 : 0;
					item.buttons.count += item.buy ? 1 : 0;
					item.buttons.w = (100 / item.buttons.count) + "%";
					if (config.thumbs.items.zoom) {
						item.buttons.zoom = $("<div class=\"zoom\">" + config.texts.zoom + "</div>").css("width", item.buttons.w).bind($.uEvent, function () {
							openWlbmBox(i);
						});
						item.buttons.append(item.buttons.zoom);
					}
					if (config.thumbs.items.visit) {
						var itemLink = item.directLink || item.link;
						item.buttons.visit = $("<a href=\"" + itemLink + "\" target=\"_blank\" class=\"visit\">" + config.texts.visit + "</a>").css("width", item.buttons.w);
						item.buttons.append(item.buttons.visit);
					}
					if (item.buy) {
						item.buttons.buy = $("<a href=\"" + item.buy + "\" target=\"_blank\" class=\"buy\">" + config.texts.buy + "</a>").css("width", item.buttons.w);
						item.buttons.append(item.buttons.buy);
					}
					if (config.thumbs.items.click) {
						item.container.bind($.uEvent, function () {
							openWlbmBox(i);
						});
					}
					item.infoWrap.append(item.buttons);

					if (config.thumbs.items.overlay.display) {
						// TODO: rounded Borders
						title = config.thumbs.items.title && item.title ? item.title : "";
						artist = config.thumbs.items.artist && item.artist ? (config.thumbs.items.title ? "<br />" + config.texts.by + " " : "") + item.artist : "";
						item.overlay = $("<div class=\"titleOverlay\">" + title + artist + "</div>").css(itemsTitleOverlayStyle);
						item.container.append(item.overlay);
					}

					item.container.hover(function (ev) {
						if (!item.infoWrap.is(":visible")) { 
							item.infoWrap.show("slide", {direction: eventSide(ev)}, 400);
							if (config.thumbs.items.overlay) {
								item.overlay.hide("slide", {direction: (config.thumbs.items.overlay.position === "top" ? "up" : "down")});
							}
						}
					}, function (ev) {
						if (item.infoWrap.is(":visible")) {
							item.infoWrap.hide("slide", {direction: eventSide(ev)}, 400);
							if (config.thumbs.items.overlay) {
								item.overlay.show("slide", {direction: (config.thumbs.items.overlay.position === "top" ? "up" : "down")});
							}
						}
					})
						.prepend(item.canvasMask)
						.prepend(item.canvasWrap)
						.append(item.infoWrap)
						.appendTo(wlbm.thumbs);
					wlbm.loadedItems += 1;
				});
				wlbm.wrap.append(wlbm.thumbs);
				centeringThumbs();
				if (config.autostart) {
					openWlbmBox(config.autostart-1);
				}
			},
			init = function (d) {
				$.extend(true, config, d);
				if (config.background.image.url) {
					wlbm.css("background", config.background.color + " url(" + config.url + config.background.image.url +") " + config.background.image.position + " " + config.background.image.repeat + " " + config.background.image.attachment);
				}
				
				getTexts(config.lang);
				// put data in wlbm.list
				if (typeof config.data === "object") {
					wlbm.list = config.data;
				} else if (config.data === "") {
					alert("walbum needs data to process");
					return;
				}
				// active item index
				wlbm.current = 0;

				// walbum wrapper
				wlbm.wrap = $("<div class=\"" + config.cssScope + "Wrap\">");
				prepareDialog();

				wlbm.html(wlbm.wrap);
				if (config.logo) {
					wlbm.append('<a href="http://viinyl.com" title="powered by viinyl.com" target="_blank" class="viinyl_link">viinyl</a>');
				}
				if (config.socialLinks) {
					$("#footer").appendTo(wlbm);
				} else {
					$("#footer").remove();
				}
				if (wlbm.css("position") === "static") {
					wlbm.css("position", "relative");
				}
				wlbm.parentNode = wlbm.parent(); 
				wlbm.h = wlbm.height();
				wlbm.originHeight = wlbm.h <= 1 ? "auto" : wlbm.h;
				wlbm.originHeight = wlbm.parentNode.is("body") && wlbm.outerHeight(true) === wlbm.parentNode.height() ? "full" : wlbm.originHeight;
				wlbm.w = wlbm.outerWidth(true);
				wlbm.originWidth = wlbm.w === wlbm.parentNode.width() ? "auto" : wlbm.w;

				switch (config.displayType) {
				case "thumbs":
					makeThumbs();
					break;
				case "cover":
					makeCover();
					break;
				case "slides":
					openWlbmBox(config.autostart ? config.autostart-1 : 0);
					break;
				}

				if (wlbm.originWidth === "auto" || wlbm.parentNode.is("body")) {
					$(window).resize(function () {
						switch (config.displayType) {
						case "thumbs":
							centeringThumbs();
							break;
						case "cover":
							centeringCover();
							break;
						case "slides":
							dialogSize();
							break;
						} 
					});
				}
			};
		
		// console override if not available	
		if (!window.console) {
			window.console = {
				log: $.noop(),
				debug: $.noop(),
				info: $.noop(),
				warn: $.noop(),
				error: $.noop()
			};
		}
		
		// detect touch capability
		if (document.ontouchmove === undefined) {
			$.uEvent = "click";
		} else {
			$.uEvent = "touchstart";
		}
		
		// extend defaults with loaded settings
		if (typeof settings === "object") {
			init(settings);
		} else if (typeof settings === "string") {
			$.getJSON(settings, function (r) {
				if (typeof r === "object") {
					init(r);
				} else {
					alert("walbum needs settings to process");
				}
			});
		} else {
			alert("walbum needs settings to process");
		}

		return this;
	};
})(jQuery);

