logos = [
	"melancolico_asimov.png",
	"melancolico_jap.png",
	"melancolico_script.png",
	"melancolico_crazy.png",
	"melancolico_graffiti.png"
];

var musicConfig = {
	projectDisplay: "vertical",
	projectTitleColor: "#ffffff",
	projectYearColor: "#ffffff",
	songBorderStyle: "solid",
	songBorderColor: "#000000",
	songBackgroundColor: "#000000",
	songBorderStyleSelect: "solid",
	songBorderColorSelect: "#ffffff",
	songBackgroundColorSelect: "#000044",
	musicRoot: "http://melancolicocatrin.net/musica/"
};

var d = document;
var lang = "";
var month = [];
var today = new Date();
var year = today.getYear();
var enableMenu = true;

function Page () {
	this.init();
}

Page.prototype = {
	config: {
		lang: "",
		logo: logos[1],
		enableMenu: true
	},
	
	init: function () {
		this.month = [];
		this.today = new Date();
		this.year = today.getYear();
	},

	getToday: function () {
		var html = [];
		this.month.push("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");
		if (this.year < 1900) {
			this.year += 1900;
		}

		if (this.today.getMonth() == 10 && this.today.getDate() == 4) {
			html.push(".: <span class='fecha'>HOY CUMPLO ", (this.year - 2004), " A&Ntilde;OS</span> :.");
		}
		else if (this.today.getMonth() == 2 && this.today.getDate() == 8) {
			html.push(".: <span class='fecha'>HOY HACE ", (this.year - 1976), " A&Ntilde;OS NACIO EL MELANCOLICO CATRIN</span> :.");
		}
		else {
			html.push(".: <span class='fecha'>", this.month[this.today.getMonth()], "</span> :. .: <span class='fecha'>", this.today.getDate(), "</span> :. .: <span class='fecha'>", this.year, "</span> :.");
		}
		return html.join("\n");
	},
	
	getHeader: function () {
		var html = [
			"<div class='block contain'>",
			"<div class='tapon'></div>",
			"<div class='derechos contain'>",
			this.getLogo(),
			"</div>",
			"<div class='derechos contain'>",
			this.getToday(),
			"</div>",
			"<div class='tapete'></div>",
			"</div>",
			this.getMenu()
		];
		return html.join("\n");
	},
	
	renderHeader: function () {
		document.write(this.getHeader());
	},
	
	getFooter: function () {
		var html = [
			this.getMenu(),
			"<div class='block contain'>",
			"<div class='tapon'></div>",
			"<div class='derechos'>",
			"<div>",
			"<a class='header' href='http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=70' target='_blank'><img class='header' border='0' alt='Get Firefox!' title='Get Firefox!' src='images/get_firefox.gif'/></a>&nbsp;&nbsp;",
			"<a class='header' href='http://www.gimp.org' target='_blank'><img class='header' border='0' alt='the Gimp' title='the Gimp' src='images/gfx_by_gimp.gif'/></a>&nbsp;&nbsp;",
			"<a class='header' href='http://www.openoffice.org' target='_blank'><img class='header' border='0' alt='Get OpenOffice.org' title='Get OpenOffice.org' src='images/88x31_3_get_OOo.png'/></a>&nbsp;&nbsp;",
			"<a class='header' href='http://www.mozilla.org/products/thunderbird/' title='Get Thunderbird - Reclaim Your Inbox' target='_blank'><img class='header' src='images/thunderbird_88x31.gif' width='88' height='31' border='0' alt='Get Thunderbird' /></a>",
			"</div>",
			"<div>",
			"<a class='header' href='http://jigsaw.w3.org/css-validator/check/referer' target='_blank'><img style='border:0;width:88px;height:31px' src='images/vcss.png' alt='Valid CSS!' /></a>&nbsp;&nbsp;",
			"<a class='header' href='http://creativecommons.org/licenses/by-nc-sa/1.0/' target='_blank'><img class='header' src='images/somerights.gif' border='0' alt='Some rights reserved' title='Some rights reserved' /></a>&nbsp;&nbsp;",
			"<a class='header' href='http://www.winamp.com' target='_blank'><img style='border:0;' src='images/winamp_logo.gif' alt='WinAMP' /></a>&nbsp;&nbsp;",
			"<a class='header' href='http://www.digitalfreedom.org' target='_blank'><img class='header' src='images/smallbanner.gif' title='DIGITAL FREEDOM - BILL OF SIGHTS AND SOUNDS' alt='DIGITAL FREEDOM - BILL OF SIGHTS AND SOUNDS' width='88' height='31' border='0' /></a>&nbsp;&nbsp;",
			"<a class='header' href='http://validator.w3.org/check?uri=referer' target='_blank'><img class='header' src='images/valid-xhtml10.png' alt='Valid XHTML 1.0 Transitional' height='31' width='88' /></a><br />",
			"<br /><span style='color:#333333;'>&copy;<a href='mailto:melancolico.catrin@gmail.com' class='derechos' title='Webmaster, Producer, Poet, Lover, Historian, Comedian, and a true Geek!'>&nbsp;melancolico catrin&nbsp;</a>, ", year, "</span>",
			"</div>",
			"<div>",
			"<center>",
			"<div class='Counter contain'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=7' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=6' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=5' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=4' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=3' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=2' border='0'>",
			"<img class='Digit' src='http://counter.bluedomino.com/Counter.mpl?user=blu.bdweb317791&account=blu.bdweb317791-mc_counter&style=a35&pos=1' border='0'>",
			"</div>",
			"</center>",
			"</div>",
			"</div>",
			"<div class='tapete'></div>",
			"</div>"
		];
		return html.join("\n");
	},
	
	renderFooter: function () {
		document.write(this.getFooter());
	},
	
	getMenu: function () {
	    var html = [
			"<div class='block contain'>",
			"<div class='mtop'></div>",
			"<div class='mmiddle contain'>",
			"<center>",
			"<ul class='menu'>",
			"<li class='menu'><a class='menuhome' href='index.html' title='A great place to start'><b>&nbsp;&nbsp;&nbsp;HOME&nbsp;&nbsp;&nbsp;</b></a></li>",
			"<li class='menu'><a class='menumusica' href='music.html' title='Information about my music'><b>&nbsp;&nbsp;&nbsp;MUSIC&nbsp;&nbsp;&nbsp;</b></a></li>",
			"<li class='menu'><a class='menualbum' href='art.html' title='Art, pictures and desktop wallpaper'><b>&nbsp;&nbsp;&nbsp;ART&nbsp;&nbsp;&nbsp;</b></a></li>",
			"<li class='menu'><a class='menuinformacion' href='info.html' title='Information about many things'><b>&nbsp;&nbsp;&nbsp;INFO&nbsp;&nbsp;&nbsp;</b></a></li>",
			"<li class='menu'><a class='menusombra' href='links.html' title='Un buen lugar para enlaces'><b>&nbsp;&nbsp;&nbsp;LINKS&nbsp;&nbsp;&nbsp;</b></a></li>",
		//	"<th class='menuitem'><a class='menusombra' href='sombra.html' title='Mi lado obscuro'><b>&nbsp;&nbsp;&nbsp;SOMBRA&nbsp;&nbsp;&nbsp;</b></a></th>",
		//"<th class='menuitem'><a class='menuarchivos' href='archivos.html' title='Chistes y cuentos'><b>&nbsp;&nbsp;&nbsp;ARCHIVOS&nbsp;&nbsp;&nbsp;</b></a></th>",
			"</ul>",
			"</center>",
			"</div>",
			"<div class='mbottom'></div>",
			"</div>"
		];
		return html.join("\n");
	},
	
	renderMenu: function () {
		document.write(this.getMenu());
	},

	getLogo: function () {
		var random_logo = 1;
		var html = [];
		html.push("<br /><a class='catrin' href='http://www.melancolicocatrin.net' style='border:0;' title='PORTAL'>");
		if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.indexOf("MSIE 6.0") > -1) {
			html.push("<img class='header' src='images/logo/melancolico_jap.gif' border='0' alt='PORTAL' title='On the web since November 4th, 2004.' /></a><br />");
		}
		else {
			html.push("<img class='header' src='images/logo/", logos[random_logo], "' border='0' alt='PORTAL' title='On the web since November 4th, 2004.' />");
		}
		html.push("</a><br />");
		
		return html.join("\n");
	},
	
	renderLogo: function () {
		document.write(this.getLogo());
	}
};

function PrintMuralMenu() {
    var html = [];
    html.push("<table cellspacing='0' border='0' width='50%' align='center' style='border-style:outset;border-width:1px;border-color:#444444;'>");
    html.push("<tr>");
    html.push("<th class='menuitem'><a class='menuinformacion' href='index.html' title='A good place to start'><b>&nbsp;&nbsp;&nbsp;HOME&nbsp;&nbsp;&nbsp;</b></a></th>");
    html.push("<th class='menuitem'><a class='menuinformacion' href='yt01.html' title='YouTube videos'><b>&nbsp;&nbsp;&nbsp;YOU TUBE&nbsp;&nbsp;&nbsp;</b></a></th>");
    html.push("<th class='menuitem'><a class='menuinformacion' href='m01.html' title='MP3s'><b>&nbsp;&nbsp;&nbsp;DEDICATIONS&nbsp;&nbsp;&nbsp;</b></a></th>");
    html.push("<th class='menuitem'><a class='menuinformacion' href='p01.html' title='Poems'><b>&nbsp;&nbsp;&nbsp;POEMS&nbsp;&nbsp;&nbsp;</b></a></th>");
    html.push("</tr>");
    html.push("</table>");
    document.write(html.join(""));
}

function FocusP(X) {
    d.getElementById(X).style.backgroundImage = "url('images/box_bg5.png')";
    d.getElementById(X).style.padding = "2px";
    d.getElementById(X).style.borderWidth = "2px";
    d.getElementById(X).style.borderColor = "#6699ff";
    d.getElementById(X).style.borderStyle = "outset";
}

function UnfocusP(X) {
    d.getElementById(X).style.backgroundImage = "";
    d.getElementById(X).style.padding = "4px";
    d.getElementById(X).style.border = "0";
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////

var plPopup = function (sTitle, s) {
	var win = window.open("", sTitle, "location=0, status=0, scrollbars=1, width=800, height=400");
	win.document.write(s);
};


function MouseOverSong(X) {
	var el = document.getElementById(X).style;
    el.backgroundColor = musicConfig.songBackgroundColorSelect;
    el.borderColor = musicConfig.songBorderColorSelect;
    el.borderStyle = musicConfig.songBorderStyleSelect;
}

function MouseOutSong(X) {
	var el = document.getElementById(X).style;
    el.backgroundColor = musicConfig.songBackgroundColor;
    el.borderColor = musicConfig.songBorderColor;
    el.borderStyle = musicConfig.songBorderStyle;
}

function Song(name, orig, folder, filename, typ, duration, creat) {
	this.init(name, orig, folder, filename, typ, duration, creat);
}

Song.prototype = {
	init: function (name, orig, folder, filename, typ, duration, creat) {
		this.Name = name;
		this.OriginalBy = orig;
		this.FileName = filename;
		this.Type = typ;
		this.Duration = duration;
		this.Created = creat;
		this.Folder = folder;
	}
};

function Project(num, name, timedate, projimg, songlist) {
	this.init(num, name, timedate, projimg, songlist);
}

Project.prototype = {
	init: function (num, name, timedate, projimg, songlist) {
		this.Num = num;
		this.Name = name;
		this.TimeDate = timedate;
		this.ProjectImage = projimg;
		this.SongList = songlist;
	},
	
	html: function (bImg) {
		var h = [];
		switch (musicConfig.projectDisplay) {
			case "vertical":
				h.push("<center><ul class='project'>");
				if (bImg) {
					h.push("<center><img class='alogo' src='images/", this.ProjectImage, "' alt='", this.Name, "' /></center>");
				}
				h.push("<h1 class='project'>", this.Name, "<br /><span class='project'>(<em class='project'>&nbsp;", this.TimeDate, "&nbsp;</em>)</span></h1><hr />");

				var counter = 0;
				for (i in this.SongList) {
					counter++;
					TempId = this.Num + i;
					h.push("<li class='project' id='", TempId, "' title='", this.SongList[i].Name, " (", this.SongList[i].Created, ") - ", this.SongList[i].Duration, "' onmouseover='MouseOverSong(&quot;", TempId, "&quot;)' onmouseout='MouseOutSong(&quot;", TempId, "&quot;)' onClick='window.open(&quot;", this.formatURL(i), "&quot;)'><strong class='project'>", counter, ". ", this.SongList[i].Name, "</strong><br /><em>");
					if (this.SongList[i].OriginalBy.length > 0) {
						h.push(this.SongList[i].OriginalBy, "<br />");
					}
					h.push(this.SongList[i].Duration, "&nbsp;&nbsp;&nbsp;<a type='application/", this.SongList[i].Type, "' href='", this.formatURL(i), "' title='click to download'><tt class='project'>&nbsp;", this.SongList[i].Type, "&nbsp;</tt></a></em></li>");
				}
				h.push("</ul>");
				h.push("<br />Playlists: <a href='javascript:plPopup(\"Playlist\", \"", this.HTMLPlayList(), "\")'>Playlist</a>, <a href='javascript:plPopup(\"Playlist\", \"", this.BBCodePlayList(), "\")'>BBCode Playlist</a>");
				h.push("</center>");
				break;
			case "horizontal":
			
				break;
		}
		return h.join("");
	},
	
	getTitle: function () {
		var html = [];
		html.push("<img src='images/split.png' alt='split' style='border:0;' />&nbsp;&nbsp;", this.Name, " (", this.TimeDate, ")&nbsp;&nbsp;<img src='images/split.png' alt='split' style='border:0;' />");
		return html.join("");
	},
	
	getImage: function () {
		var html = [];
		html.push("<center><img src='images/", this.ProjectImage, "' alt='", this.Name, "' /></center>");
		return html.join("");
	},

	render: function (bImg) {
		document.write(this.html(bImg));
	},

	renderTitle: function () {
		document.write(this.getTitle());
	},

	renderImage: function () {
		document.write(this.getImage());
	},

	HTMLPlayList: function () {
		var html = [];
		html.push("<pre>");
		html.push("<p>");
		for (i in this.SongList) {
			html.push(this.formatURL(i), "<br />");
		}
		html.push("</p>");
		html.push("</pre>");
		return html.join("");
	},

	BBCodePlayList: function () {
		var html = [];
		html.push("<pre>");
		html.push("[b]", this.Name, " (", this.TimeDate, ")[/b]<br />");
		for (i in this.SongList) {
			html.push("[url=", this.formatURL(i), "]", this.SongList[i].Name, "[/url]<br />");
		}
		html.push("</pre>");
		return html.join("");
	},
	formatURL: function (i) {
		var link = [musicConfig.musicRoot, this.SongList[i].Type, "/", this.SongList[i].Folder, "/", this.SongList[i].FileName];
		return link.join("");
	}
};

function GetThumb(Album) {
	return Album.Name + ".thumb.gif"
}

function PrintThumbList(MC) {
    document.write(GetThumbList(MC));
}

function GetThumbList(MC) {
   var html = [];
	for (var i = 0; i < MC.length; i++)
   	html.push(GetThumb(MC[i]));

   return html.join("");
}

function getProjectAnchor(Project) {
    var html = [];

    html.push("musica.html");
    html.push("#", Project.Name);
    return html.join("");
}

function PrintThumbs(MC) {
	document.write(GetThumbs(MC));
}

function GetThumbs(MC) {
    var html = [];
    var inner = 0;
    var NewRow = true;
    var MaxCol = 4;
    html.push("<table class='thumbtable'>");
	html.push("<tbody>");
    for (var i = 0; i < MC.length; i++) {
        if (NewRow) {
            html.push("<tr>");
        }
        //html.push("<th width='25%'><a href='", getProjectAnchor(MC[i]), "'><img class='thumb' src='thumbs/discos/", GetThumb(MC[i]), "' border='0' alt='", MC[i].Name, "' /></a><br /><span class='Tiny'>", MC[i].TimeDate, "</span></th>");
		html.push("<th width='25%'><img class='thumb' src='thumbs/discos/", GetThumb(MC[i]), "' border='0' alt='", MC[i].Name, "' /><br /><span class='Tiny'>", MC[i].TimeDate, "</span></th>");
        if (inner === (MaxCol - 1)) {
            inner = 0;
            html.push("</tr>");
            NewRow = true;
        }
        else {
            NewRow = false;
            inner++;
        }
    }
    if (inner < 3) html.push("</tr>");
	html.push("</tbody>");
    html.push("</table>");
    return html.join("");
}


function PrintProjectList(MC) {
    document.write(GetProjectList(MC));
}

function GetProjectList(MC) {
    var html = [];

    html.push("<ul>");
    for (var i = 0; i < MC.length; i++) {
        html.push("<li style='font-weight: bold;'><a href='", getProjectAnchor(MC[i]), "'><b><i>", MC[i].Name, "</i></b></a> (", MC[i].TimeDate,")");
    }
    html.push("</ul>");
    return html.join("");
}

function renderDownloadContent() {
	if (current.SongList.length >= 13) {
		$("#downloadRight").html("");
		$("#downloadLeft").html(downloadbox.html());
	}
	if (current.SongList.length < 13) {
		$("#downloadLeft").html("");
		$("#downloadRight").html(downloadbox.html());
	}
}

$(document).ready(function () {
	$("img.thumb").fadeTo(0, 0.5);
	$("img.thumb").mouseover(function () {
		var pos = $(this).position();
		var a = $(this).attr("alt");
		var infoBoxContent = [
			"<div class='content contain'>",
			"<img class='thumb' src='thumbs/discos/", GetThumb(projects[a]), "' border='0' alt='", a, "' />",
			"<div>",
			"<strong>Project: </strong>", projects[a].Name, "<br />",
			"<strong>Year: </strong>", projects[a].TimeDate, "<br />",
			"<strong>Songs: </strong>", projects[a].SongList.length,
			"</div>",
			"</div>"
		];
		$("#infoBox").css({display:"block", left:pos.left - 120 + "px", top:pos.top + 74 + "px"}).html(infoBoxContent.join("\n"));
		$(this).fadeTo(250, 1.0);
	}).mouseout(function () {
		$("#infoBox").css({display:"none"})
		$(this).fadeTo(250, 0.5);
	});
	$("img.thumb").bind("click", function () {
		var a = $(this).attr("alt");
		current = projects[a];

		$("#currentProject").html(current.html(true));
		$("#projectTitle").html(current.Name);
		$("#projectDescription").html(descriptions[a].join("\n"));
		renderDownloadContent();
	});
});

var page = new Page();