var onClickListItem = null;
var mouseOverListItem = null;

var menuItems = null;
var menuItemsOnMouseOver = null;
var menuItemsOnClick = null;

var mouseOverMenuItem = null;
var clickMenuItem = null;

var images = null;

var lists = new Array();
var firstImages = new Array();
var aboutImage = '';
var beautyImages = new Array();
var beautyListItems = new Array();
var peopleImages = new Array();
var peopleListItems = new Array();
var placesImages = new Array();
var placesListItems = new Array();
var otherImages = new Array();
var otherListItems = new Array();
var contactImage = '';

function onLoad()
{
	populateMenuItems();

	populateImages();

	populateListItems();
					
	//menuItemOnClick(document.getElementById('aboutMeMenuItem'));
}

function addMenuItem(menuItemName, menuList)
{
	var menuItem = document.createElement('li');
	menuItem.id = menuItemName + 'MenuItem';
	menuItem.onclick = function()
	{
		menuItemOnClick(menuItem);
	}
	menuItem.onmouseover = function()
	{
		menuItemOnMouseOver(menuItem);
	}
	menuItem.onmouseout = function()
	{
		menuItemOnMouseOut(menuItem);
	}
	menuList.appendChild(menuItem);
}

function populateMenuItems()
{
	var menuList = document.createElement('ul');
	menuList.id = 'menuList';
	
	//addMenuItem('aboutMe', menuList);
	addMenuItem('beauty', menuList);
	addMenuItem('people', menuList);
	addMenuItem('places', menuList);
	addMenuItem('other', menuList);
	//addMenuItem('contact', menuList);
	
	document.getElementById('menuPanel').appendChild(menuList);

	menuList = document.createElement('ul');
	menuList.id = 'topMenuList';
	addMenuItem('aboutMe', menuList);
	addMenuItem('wedding', menuList);
	addMenuItem('contact', menuList);
	document.getElementById('topMenuPanel').appendChild(menuList);
}

function addListItem(listId, index, images)
{
	var listItem = document.createElement('li');
	listItem.id = listId + 'Item' + index;
	listItem.onclick = function()
	{
		listItemOnClick(listItem, images[index]);
	}
	listItem.onmouseover = function()
	{
		listItemOnMouseOver(listItem);
	}
	listItem.onmouseout = function()
	{
		listItemOnMouseOut(listItem);
	}
	document.getElementById(listId).appendChild(listItem);
	return listItem;
}

function addListItemWWW(listId, name, url)
{
	var listItem = document.createElement('li');
	listItem.id = listId + 'Item' + name;
	listItem.onclick = function()
	{
		listItemOnClick(listItem, url);
	}
	listItem.onmouseover = function()
	{
		listItemOnMouseOver(listItem);
	}
	listItem.onmouseout = function()
	{
		listItemOnMouseOut(listItem);
	}
	document.getElementById(listId).appendChild(listItem);
	return listItem;
}

function addList(element)
{
	var list = document.createElement('ul');
	list.id = element.id + 'List';
	element.appendChild(list);
}

function populateListItems()
{
	var index;
	var element;

	lists.push(document.getElementById('aboutMe'));
	firstImages.push(aboutImage);

	element = document.getElementById('beauty');
	lists.push(element);
	firstImages.push(beautyImages[0]);
	for (index = 0; index < beautyImages.length; index++)				
	{
		beautyListItems.push(addListItem('beautyList', index, beautyImages));
	}
	
	element = document.getElementById('people');
	lists.push(element);
	firstImages.push(peopleImages[0]);
	for (index = 0; index < peopleImages.length; index++)				
	{
		peopleListItems.push(addListItem('peopleList', index, peopleImages));
	}
	
	element = document.getElementById('places');
	lists.push(element);
	firstImages.push(placesImages[0]);
	for (index = 0; index < placesImages.length; index++)				
	{
		placesListItems.push(addListItem('placesList', index, placesImages));
	}
	
	element = document.getElementById('other');
	lists.push(element);
	firstImages.push(otherImages[0]);
	for (index = 0; index < otherImages.length; index++)				
	{
		otherListItems.push(addListItem('otherList', index, otherImages));
	}
	//otherListItems.push(addListItemWWW('otherList', 'GosiaIRafal', 'http://gosiairafal.pl'));
	//otherListItems.push(addListItemWWW('otherList', 'AgataIMichal', 'http://agataimichal.pl'));
	
	lists.push(document.getElementById('contact'));
	firstImages.push(contactImage);
}

function populateImages()
{
	aboutImage = 'aboutMe.jpg';

	beautyImages.push('Beauty/iwonka2.jpg');
	beautyImages.push('Beauty/iwonka1.jpg');
	beautyImages.push('Beauty/DSC_8439_480.jpg');
	beautyImages.push('Beauty/anitabw.jpg');
	beautyImages.push('Beauty/anita2.jpg');
	beautyImages.push('Beauty/anita3.jpg');
	beautyImages.push('Beauty/DSC_8379_480.jpg');
	beautyImages.push('Beauty/anita1.jpg');
	beautyImages.push('Beauty/kasia3d.jpg');
	beautyImages.push('Beauty/kasia_AW1.jpg');
	beautyImages.push('Beauty/kasia_AW2.jpg');
	beautyImages.push('Beauty/ewelinka1480.jpg');
	beautyImages.push('Beauty/ewelinkamix.jpg');
	beautyImages.push('Beauty/button3.jpg');
	beautyImages.push('Beauty/button4.jpg');
	beautyImages.push('Beauty/agata5480.jpg');
	beautyImages.push('Beauty/agata1480.jpg');
	beautyImages.push('Beauty/agata2480.jpg');
	beautyImages.push('Beauty/b9.jpg');
	beautyImages.push('Beauty/b8.jpg');
	beautyImages.push('Beauty/b10.jpg');
	beautyImages.push('Beauty/b5.jpg');
	beautyImages.push('Beauty/b4.jpg');
	beautyImages.push('Beauty/b6.jpg');
	beautyImages.push('Beauty/b3.jpg');
	beautyImages.push('Beauty/b2.jpg');
	beautyImages.push('Beauty/b1.jpg');
	
	peopleImages.push('People/ciaza2.jpg');
	peopleImages.push('People/ciaza1.jpg');	
	peopleImages.push('People/anita6480.jpg');
	peopleImages.push('People/anitas.jpg');	
	peopleImages.push('People/dziadek20.jpg');	
	peopleImages.push('People/cosmodelka2.jpg');
	peopleImages.push('People/cosmodelka3.jpg');
	peopleImages.push('People/dziur1.jpg');
	peopleImages.push('People/DSC_8604_480.jpg');
	peopleImages.push('People/DSC_8589_480prost.jpg');
	peopleImages.push('People/getto1.jpg');
	peopleImages.push('People/getto2.jpg');
	peopleImages.push('People/DSC_0313.jpg');
	peopleImages.push('People/p3.jpg');
	peopleImages.push('People/ewa1.jpg');
	peopleImages.push('People/ewa3.jpg');
	peopleImages.push('People/gabi12_34480.jpg');
	peopleImages.push('People/agnieszka5480.jpg');
	peopleImages.push('People/agnieszka6480.jpg');
	peopleImages.push('People/agata4480.jpg');
	peopleImages.push('People/q480.jpg');
	peopleImages.push('People/q.jpg');
	peopleImages.push('People/Hass480OK.jpg');
	peopleImages.push('People/dziadek480OK.jpg');
	peopleImages.push('People/dziadek480OK2.jpg');
	peopleImages.push('People/p5.jpg');
	peopleImages.push('People/p6.jpg');
	peopleImages.push('People/p7.jpg');
	peopleImages.push('People/Hass3480OK.jpg');
	peopleImages.push('People/p1.jpg');
	
	placesImages.push('Places/10.jpg');
	placesImages.push('Places/13.jpg');
	placesImages.push('Places/11.jpg');
	placesImages.push('Places/12.jpg');
	placesImages.push('Places/1.jpg');
	placesImages.push('Places/6.jpg');
	placesImages.push('Places/9.jpg');
	placesImages.push('Places/3.jpg');
	placesImages.push('Places/no1.jpg');
	placesImages.push('Places/7.jpg');
	placesImages.push('Places/2.jpg');
	placesImages.push('Places/4.jpg');
	placesImages.push('Places/5.jpg');
	placesImages.push('Places/no2.jpg');
	placesImages.push('Places/no3.jpg');
	placesImages.push('Places/no4.jpg');
	placesImages.push('Places/no5.jpg');
	placesImages.push('Places/no6.jpg');
	placesImages.push('Places/no7.jpg');
	placesImages.push('Places/no8.jpg');

	
	otherImages.push('Other/wedding1.jpg');

	contactImage = 'contact.jpg';
}

function showOnly(listId)
{
	for (index in lists)
	{
		if (lists[index].id == listId)
		{
			lists[index].style.display = 'block';
			lists[index].style.visibility = 'visible';
			var element = null;
			if (listId != 'aboutMe' && listId != 'contact' && listId != 'wedding')
			{
				element = lists[index].firstChild;
			}
			listItemOnClick(element, firstImages[index]);
		}
		else
		{
			lists[index].style.display = 'none';
			lists[index].style.visibility = 'hidden';
		}
	}
}

function listId(menuItemId)
{
	switch (menuItemId)
	{
		case 'aboutMeMenuItem':
			return 'aboutMe'
		case 'beautyMenuItem':
			return 'beauty';
		case 'peopleMenuItem':
			return 'people';
		case 'placesMenuItem':
			return 'places';
		case 'otherMenuItem':
			return 'other';
		case 'contactMenuItem':
			return 'contact';
		case 'weddingMenuItem':
			return 'wedding';
	}
	return null;
}

function menuItemOnClick(element)
{
    if (element != null)
    {
        if (clickMenuItem != null)
        {
	        clickMenuItem.style.backgroundImage = getCssRule('#' + clickMenuItem.id).style.backgroundImage;
        }
        clickMenuItem = element;
        if (clickMenuItem != null)
        {		
	        clickMenuItem.style.backgroundImage = getCssRule('#' + clickMenuItem.id + 'OnClick').style.backgroundImage;
	        if (element.id != 'weddingMenuItem')
            {
	        showOnly(listId(clickMenuItem.id));
            }
            else
            {
                window.open('http://michalpedziwiatr.pl/wedding', '_self');
            }
        }
	}
}

function menuItemOnMouseOver(element)
{
	if (mouseOverMenuItem != null && mouseOverMenuItem != clickMenuItem)
	{
		mouseOverMenuItem.style.backgroundImage = getCssRule('#' + mouseOverMenuItem.id).style.backgroundImage;
	}
	mouseOverMenuItem = element;
	if (mouseOverMenuItem != null && mouseOverMenuItem != clickMenuItem)
	{
		mouseOverMenuItem.style.backgroundImage = getCssRule('#' + mouseOverMenuItem.id + 'OnMouseOver').style.backgroundImage;
	}
}

function menuItemOnMouseOut(element)
{
	if (mouseOverMenuItem != null && mouseOverMenuItem != clickMenuItem)
	{
		mouseOverMenuItem.style.backgroundImage = getCssRule('#' + mouseOverMenuItem.id).style.backgroundImage;
	}
}

function listItemOnClick(element, url)
{
	if (onClickListItem != null)
	{
		onClickListItem.style.backgroundImage = getCssRule('.OnMouseOut').style.backgroundImage;
	}
	onClickListItem = element;
	if (onClickListItem != null)
	{
		onClickListItem.style.backgroundImage = getCssRule('.OnClick').style.backgroundImage;
	}
		//alert(onClickListItem);
	if (onClickListItem != null
            && (onClickListItem.id == 'otherListItemGosiaIRafal'
	           || onClickListItem.id == 'otherListItemAgataIMichal'))
	{
	    window.open(url, '_blank');
	}
	else
	{
	    var imagePanel = document.getElementById('imagePanel');
	    if (imagePanel != null)
	    {
		    var pathStart = location.hostname + location.pathname.replace('index.htm', '');

		    imagePanel.style.backgroundImage = "Url('http://" + pathStart + "img/" + url + "')";
		    imagePanel.style.backgroundRepeat = "No-repeat";
	    }
	}
}

function listItemOnMouseOver(element)
{
	if (mouseOverListItem != null && mouseOverListItem != onClickListItem)
	{
		mouseOverListItem.style.backgroundImage = getCssRule('.OnMouseOut').style.backgroundImage;
	}
	mouseOverListItem = element;
	if (mouseOverListItem != null && mouseOverListItem != onClickListItem)
	{
		mouseOverListItem.style.backgroundImage = getCssRule('.OnMouseOver').style.backgroundImage;
	}
}

function listItemOnMouseOut(element)
{
    if (mouseOverListItem != null && mouseOverListItem != onClickListItem)
	{
		mouseOverListItem.style.backgroundImage = getCssRule('.OnMouseOut').style.backgroundImage;
	}
}

function getCssRule(name)
{
    var rules = new Array();
    if (document.styleSheets[0].cssRules)
    {
        rules = document.styleSheets[0].cssRules;
    }
    else
    {
        rules = document.styleSheets[0].rules;
    }
    for (var i = 0; i < rules.length; i++) 
    {
        if (rules[i].selectorText && rules[i].selectorText == name) 
        {
            return rules[i];
        }
    }
    return rules[0];
}