/*  jQuery functions for HOME page  */


$(document).ready(function(){
	
	function artistsSize () {
		// Fix height of artist images container
		// NO LONGER REQUIRED:
			// first load on Chrome gets contTop too small...
			// but 100px seems to clear it out and balances top space nicely
					// var newHite = winHite-contTop-bottomMargin;
					// newHite = (newHite<300 ? 300 : newHite); // 
					// $('#artists').css({'height':newHite+'px'});
		// set width of text columns, only if they exist
		var artColWidth = Math.floor($('#artists').width() /3)-10; // there are always three columns
		$('.artCol').css({'width':artColWidth});
		//  could possibly check maximum width of artist name and reset column widths to reduce right margin...
		
		
		// now try to space the floated artist icon h5's across available space
		// The spacing is determined by  marginRight of  #artists h5 img, span.arName  default 50px
		var defMargin = 50;
		var defImgWidth = 100;
		// and images being 100px wide. Mininum width is therefore 150px.
		var pageWidth = $('#page').width(); // this is set in jq_all as a percentage, here find actual value
		var icnWidth = defImgWidth + defMargin;
		// divide page width by icon width to find max number of columns possible to show
		var numCols = Math.floor(pageWidth / icnWidth);
		// space taken up by image widths 
		var totImgWidth = numCols * defImgWidth;
		// remaining space to be divided between columns as the right-margin
		var totMarginWidth = pageWidth - totImgWidth;
		// ... in the end, the last column doesn't want this margin so there is one less to divide by
		//     and remove a bit of leeway just in case  :-|
		var marginWidth = Math.floor(totMarginWidth / (numCols-1)) -1;
		// set margin on every h5
		$('#artists h5 img').css({marginRight : marginWidth});
		$('span.arName').css({marginRight : marginWidth});
		// remove margin from last of each row
		$('#artists h5').each(function(index) {
			var count = index+1; //  the number of this icon
			if ( count%numCols==0 ) {
				// if it divides neatly by the number of cols, it must be the end one
				$(this).find('img').css({marginRight : 0});
				$(this).find('.arName').css({marginRight : 0});
			};
			// while we're at it, check the artist's name is not too wide
			var nameWidth = $(this).find('.arName').width();
			// BUT IE7 GETS WRONG WIDTH
			if ( nameWidth>icnWidth ) { // very unlikely
				$(this).find('.arName').css({fontSize:'80%'});
				nameWidth = $(this).find('.arName').width();
			};
			if ( nameWidth>defImgWidth ) { // occasionally happens
				var xs = nameWidth-defImgWidth;
				var thisMargin = $(this).find('.arName').css('marginRight');
				thisMargin = thisMargin.replace('px','');
				var newMargR = thisMargin-xs;
				var newMargL = 0-(newMargR/2);
				// alert('nameWidth:'+nameWidth+', 'xs:'+xs+', thisMargin:'+thisMargin+', newMargin:'+newMargin);
				$(this).find('.arName').css({marginRight:newMargR, marginLeft:newMargL});
			};
		});
		
		
	}
	artistsSize(); // run once on load, then again every window resize
	
	$(window).resize(function() { // THINGS TO RUN ON RESIZE
		artistsSize();
	});
		
	
	// DEPRECATED older version
	// var imgSize = 127; // set size of images (max width or height) corresponds to php function including border/padding too
	// var gallRows = 3; // required number of rows
	// var numItems = $('#artist_gallery h5').size();
	// //  gallWidth work out required width of #artist_gallery
	// var minNoItems = Math.ceil(numItems/gallRows);
	// var gallWidth = imgSize*minNoItems;
	// $('#artist_gallery').css({width:gallWidth+'px'});
	// // var gallHite = imgSize*gallRows +30;
	// // $('#artists').css({height:gallHite+'px'});
	// // per row, how many are visible, how many hidden?
	// var hidden = numItems - Math.floor($('#artists').width()/imgSize);
	// // Scroll To half the hidden number ...or so..
	// var scrolto = Math.ceil(hidden/2) 
	// $('#artists').scrollTo('h5:eq('+scrolto+')', {over:-0.5});		
	// // $('#artists').scrollTo(gallWidth/2+'px');		
	// // $('#artists').scrollTo(50,200);		
	// 
	// 
	// $('#artist_gallery h5 a').hover(function() {
	// 	var artitle = $(this).attr('title');
	// 	var artistName = artitle.substring(0, artitle.indexOf(' - '));
	// 	$('#artistName').html(artistName);
	// }, function() {
	// 	$('#artistName').html('&nbsp;');
	// });
	

	
});