/*
Written by Spellcoder (Mark de Jong) in 2009
*/

var usingIE = /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);

/* Create ImageFlow instances when the DOM structure has been loaded */
/*
domReady(function()
{
	instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:'myImageFlow' });
});
*/

currentView = 'home';
visibleArtist = '';
currentbrowser = null;

function prepare()
{
	newscontainer = document.getElementById('news');
	artistcontainer = document.getElementById('artist');
	artistselectioncontainer = document.getElementById('artistselection');

	tbrowserproto = document.getElementById('browserproto');
	tbrowserproto.removeAttribute('id');


	//coverflow = document.getElementById('myImageFlow');
	
	if (usingIE)
	{
		moveNewsContainer = new blexeffect(
								{ element:   newscontainer
								, duration:  500
								, method:    'sin'

								, effects:	[ { effect:    'move'
											  , hook:      'right'
											  , startX:		15
											  , endX:      -newscontainer.clientWidth //-202 //endX (width+padding+border)
											  }
											]
								});
	}
	else
	{
		moveNewsContainer = new blexeffect(
								{ element:   newscontainer
								, duration:  500
								, method:    'sin'

								, effects:	[ {	effect:     'fade'
											  , startvalue: 100
											  , endvalue:	0
											  }
											,
											  { effect:    'move'
											  , hook:      'right'
											  , startX:		15
											  , endX:      -newscontainer.clientWidth //-202 //endX (width+padding+border)
											  }
											]
								});
	}
								
	moveArtistSelContainer = new blexeffect(
							{ element:   artistselectioncontainer
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'setpxonprop'
										  , prop:		'width'
										  , startvalue:	artistselectioncontainer.clientWidth
										  , endvalue:	160
										  }
										  ,
										  { effect:		'setpxonprop'
										  , prop:		'top'
										  , startvalue:	15
										  , endvalue:	0
										  }
										  ,
										  { effect:		'setpxonprop'
										  , prop:		'bottom'
										  , startvalue:	15
										  , endvalue:	0
										  }
										  ,
										  { effect:			'colorfade'
										  , prop:			'backgroundColor'
										  , startcolors:	{ red: 230, green: 230, blue: 230, alpha: 0.8 }
										  , endcolors:		{ red:   0, green:   0, blue:   0, alpha: 1.0 }
										  }
										]
						   });

   hideHomeViewMenu = new blexeffect(
							{ element:   document.getElementById('homemodemenu')
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'fade'
										  , startvalue:	100
										  , endvalue:	0
										  }
										]
						   });						   

   hideArtistViewMenu = new blexeffect(
							{ element:   document.getElementById('artistsmodemenu')
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'fade'
										  , startvalue:	100
										  , endvalue:	0
										  }
										]
						   
						   });						   

						   
	moveArtistContainer = new blexeffect(
							{ element:   artistcontainer
							, duration:  500
							, method:    'sin'

							, effects:	[ {	effect:     'fade'
										  , startvalue: 0
										  , endvalue:	100
										  }
										/*,
										  { effect:    'move'
										  , hook:      'left'
										  , startX:		100
										  , endX:		194 //215-50
										  }*/
										]
						   });

	fadeoutPreviousArtist = new blexeffect(
							{ element:   null
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'fade'
										  , startvalue:	100
										  , endvalue:	0
										  }
										]
						   });						   

	fadeinNewArtist = new blexeffect(
							{ element:   null
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'fade'
										  , startvalue:	0
										  , endvalue:	100
										  }
										]
						   });						   
			   
	moveLogo = new blexeffect(
							{ element:   document.getElementById('logo')
							, duration:  500
							, method:    'sin'

							, effects:	[ { effect:		'setpxonprop'
										  , prop:		'left'
										  , startvalue:	0
										  , endvalue:	17
										  }
										]
						   });						   

	mouseoverDescription = new blexeffect(
								{ element:	document.getElementById('mediameta')
								, duration: 400
								, method:	'sin'
								, effects:	[ /*{ effect:		'fade'
											  , startvalue:	50
											  , endvalue:	80
											  }
											,*/ { effect:			'colorfade'
											  , prop:			'backgroundColor'
											  , startcolors:	{ red:  80, green:  80, blue:  80, alpha: 0.5 }
											  , endcolors:		{ red: 110, green: 110, blue: 110, alpha: 0.8 }
											  }
											,
											  { effect:			'colorfade'
											  , prop:			'color'
											  , startcolors:	{ red:  50, green:  50, blue:  50 }
											  , endcolors:		{ red: 255, green: 255, blue: 255 }
											  }
											]
								, onfinish: function() { console.log('mouseover anim finished'); }
								});
						   
	  //	artistListBlack = artistselectioncontainer.cloneNode(true);
}

function switchToArtistView(artist)
{
	ShowPage('');
	
	if (currentView == 'artist')
	{
		// crossfade artist pages
		if (visibleArtist != artist)
		{
			showMediaListFor(artist);

			if (visibleArtist != '')
			{
				// brutely cancel old fade if it's still running
				if (window.oldartistcontainer)
				{
					fadeoutPreviousArtist.stop();
					oldartistcontainer.style.display = 'none';
				}

				oldartistcontainer = document.getElementById('artist_'+visibleArtist);
				fadeoutPreviousArtist.restart({ element: oldartistcontainer
											, onfinish: function() { this.element.style.display = 'none'; } });
			}

			var newartistcontainer = document.getElementById('artist_'+artist);
			newartistcontainer.style.display = 'block';
			fadeinNewArtist.restart({ element: newartistcontainer });

			visibleArtist = artist;
		}

		return;
	}	

	showMediaListFor(artist);

	// just quickly swap artist pages
	if (visibleArtist != artist)
	{
		if (visibleArtist != '')
			document.getElementById('artist_'+visibleArtist).style.display = 'none';
		
		visibleArtist = artist;
	}
	
	currentView = 'artist';


	// the spaghetti monster was here!


	var elemshowcase = document.getElementById('artist_showcase');
	elemshowcase.style.display = 'block';
	
	var currentartist = document.getElementById('artist_'+artist);
	setOpacity(currentartist, 100);
	currentartist.style.display = 'block';
	
	artistcontainer.style.display = 'block';
	
	var elemlogo = document.getElementById('logo');
	curlogoxpos = elemlogo.offsetLeft;
	elemlogo.style.marginLeft = '0';
	moveLogo.options.effects[0].startvalue = curlogoxpos;
	moveLogo.start();
	
	document.getElementById('homemodemenu').style.display = 'none';
    document.getElementById('artistsmodemenu').style.display = 'block';
	document.getElementById('artist_showcase').style.display = 'block';
	
	moveNewsContainer.start({ onfinish:   function() { newscontainer.style.display = 'none'; } });
	moveArtistSelContainer.start({ onfinish:   function() { /*this.element.className = 'sidebar artistmode';*/ } });
	moveArtistContainer.start({ onfinish:   function() { } });
}

function ShowPage(pagename)
{
	var pages = ['verein','satzung','kontakte'];
	
	for(tel=0; tel < pages.length; tel++)
	{
		document.getElementById(pages[tel]).style.display = 'none';
	}
	
	if(pagename == '')
		return;
	
	document.getElementById(pagename).style.display = 'block';
}

function switchToHomeView()
{
	if (currentView == 'home')
		return;

	currentView = 'home';

	showMediaListFor(''); // hide

	newscontainer.style.display = 'block';
	
	var elemshowcase = document.getElementById('artist_showcase');
	elemshowcase.style.display = 'none';

	document.getElementById('homemodemenu').style.display = 'block';
    document.getElementById('artistsmodemenu').style.display = 'none';
	document.getElementById('artist_showcase').style.display = 'none';

	moveLogo.startReverse();
	moveArtistSelContainer.startReverse({ onfinish:   function() { /*this.element.className = 'sidebar';*/ } });
	moveArtistContainer.startReverse({ onfinish:   function() { artistcontainer.style.display = 'none'; ShowPage('verein'); } });
	moveNewsContainer.startReverse({ onfinish: function() { } });
}

function showMediaListFor(artist)
{
	document.getElementById('fullsizeimage').style.display = 'none';

	if (artist == '')
	{
		currentbrowser.container.parentNode.removeChild(currentbrowser.container);
		currentbrowser = null;
		img_json = [];
		return;
	}

	// maak image lijst voor Lightbox
	img_json = getPhotoListForLightboxByArtist(artist);

	var newbrowsercont = tbrowserproto.cloneNode(true);
	newbrowsercont.style.display = 'block';
	
	var oldcontainer = currentbrowser ? currentbrowser.container : null;

	var newbrowser =	{ container: newbrowsercont
						, thumbs:	 getElementsByClassName('thumblistcontainer', 'div', newbrowsercont)[0]
						, thumbprev: getElementsByClassName('thumbprev', 'div', newbrowsercont)[0]
						, thumbnext: getElementsByClassName('thumbnext', 'div', newbrowsercont)[0]
						};
		
	var fotolijst = artists[artist].media;

	currentbrowser = newbrowser; // overwrite before making new selector, because it will autoselect the first item

	keuzelijst = new slidingselector(
									{ thumbcontainer: newbrowser.thumbs
									, items:          fotolijst
									, onselect:       showimage
									});

	if (!oldcontainer)
		document.getElementById('playfield').appendChild(newbrowser.container);
	else
		oldcontainer.parentNode.replaceChild(newbrowser.container, oldcontainer);
}

function showimage(itemdata, viewinfo)
{
	var elempic = document.getElementById('fullsizeimage');
	elempic.src = itemdata.data.src;
	elempic.style.display = ''; // remove inline definition, so setting from stylesheet is used

	var thumbprevclass = (viewinfo.itemid == 0) ? 'thumbprev thumbprev_disabled' : 'thumbprev'
	currentbrowser.thumbprev.className = thumbprevclass;

	var thumbnextclass = (viewinfo.itemid == viewinfo.itemcount-1) ? 'thumbnext thumbnext_disabled' : 'thumbnext'
	currentbrowser.thumbnext.className = thumbnextclass;

	document.getElementById('mediatitle').innerHTML = itemdata.title;
	document.getElementById('mediadescription').innerHTML = itemdata.description;
//alert(itemdata.forsale);
	var fselem = document.getElementById('mediaforsale');
	fselem.innerHTML = itemdata.forsale ? 'For Sale!' : '';

//	console.log(itemdata.forsale);
}