var $j = jQuery.noConflict();
// We'll use jquery with our own prefix with hope of avoiding conflicts and without having to type 'jQuery' every time

$j(document).ready(function () {
	
//HEADER
	//set the width of our header based on browser width
		var wrap = $j('#wrap');
		var siteheader = $j('#siteheader');
		var wrapWidth = $j(wrap).css('width');
		$j(siteheader).css({'width': wrapWidth});
	//and also resize if the user resizes the window
		$j(window).resize(function() {
			var wrapWidth = $j(wrap).css('width');
			$j(siteheader).css({'width': wrapWidth});
		});
	//Toggle visibility of 'latest' button in header
		var latest = $j('#latest');
		$j(latest).find('a.latest, a.close').click(function(){
			$j(latest).find('article').slideToggle('fast');
		});

//COLLECTIONS & PROJECTS
	//Lets try and make our own lightbox for the collections page
		var modal = $j('#modal');
		var modalfigure = $j(modal).find('figure');
		$j('#collectionimages article').find('a.trigger').click(function(){
			$j(this).find('.popup img').clone().appendTo(modalfigure);
			$j(this).find('.details').clone().appendTo(modalfigure);
			$j(modal).fadeIn('slow');
			return false;
		});
		$j(modal).click(function(){
			$j(this).fadeOut('fast', function() {
				$j(this).find('img, .details').remove();
			});
		});
	//Set our isotope elements
		$j('#collectionimages, #projectimages').isotope({ filter: '.post' });
	//Filter the isotope elements
		$j('#filters a').click(function(){
			var selector = $j(this).attr('data-filter');
			$j('#collectionimages, #projectimages').isotope({ filter: selector });
			return false;
		});
	//add class for selected filter buttons
		var filters = $j('#filters');
		$j(filters).find('a').click(function(){
			$j(filters).find('.selected').removeClass('selected');
			$j(this).parent().addClass('selected');
		});
	//auto click the first link to filter content
		$j('#filters a:first').trigger('click');

//CALENDAR
		//the ul containing our display toggle switches
		var views = $j('#views');
		//the ul containing our time toggle switches
		var time = $j('#time');
		//overall section wrapper
		var calendar = $j('#calendar');
		//the link to see more/less content
		var seemore = $j('.seemore');
	//See more details slidedown on calendar page
		$j(calendar).find('article').click(function(){
			//if you click on a box that is already showing
			if($j(this).find('.details').hasClass('show')){
				//change the text relevant to this box
				$j(this).find(seemore).text('See More Details');
				//close box annd remove class
				$j(calendar).find('.details.show').slideToggle().removeClass('show').addClass('hide');
				return false;
			}
			//else you're click on a box that isn't open
			else{
				//reset all button text
				$j(calendar).find(seemore).text('See More Details');
				//change the button text relevant to this box
				$j(this).find(seemore).text('See Less Details');
				//fade out any open boxes and remove class
				$j(calendar).find('.details.show').slideToggle().removeClass('show').addClass('hide');
				//open this box and add class
				$j(this).find('.details.hide').slideToggle().addClass('show').removeClass('hide');
				return false;
			}
		});
	//Calendar view buttons
		var upcomingevents = $j('#upcoming');
		var pastevents = $j('#past');
		$j(views).find('a').click(function(){
			$j(views).find('.selected').removeClass('selected');
			$j(this).parent().addClass('selected');
			return false;
		});
		$j(time).find('a').click(function(){
			$j(time).find('.selected').removeClass('selected');
			$j(this).parent().addClass('selected');
			return false;
		});
	//Calendar time buttons
		$j(time).find('a').click(function(){
			$j(pastevents).slideToggle();
			$j(upcomingevents).slideToggle();
			return false;
		});
	//Toggle classes on the calendar container for different views
		$j(views).find('a.list').click(function(){
			$j(calendar).removeClass('grid').addClass('list');
			return false;
		});
		$j(views).find('a.grid').click(function(){
			$j(calendar).removeClass('list').addClass('grid');
			return false;
		});
	//add in a class to clear floats for the grid view
		$j(upcomingevents).find('article:nth-child(4n+1)').addClass('newrow');
		$j(pastevents).find('article:nth-child(4n+1)').addClass('newrow');
	//and another to tidy up the bottom row of the list view
		$j(upcomingevents).find('article').last().addClass('last');
		$j(pastevents).find('article').last().addClass('last');

	//Empty Calendar test
		//how many events are their in each category?
		var upcomingnumber = $j(upcomingevents).find('article').length;
		var pastnumber = $j(pastevents).find('article').length;
		//if theres none lets send a message
		if(upcomingnumber === 0) {
			$j(upcomingevents).append('<article class="empty"><h1>Sorry, nothing here yet, please check back soon!</h1><div class="clearfix"></div></article>');
		};
		if(pastnumber === 0) {
			$j(pastevents).append('<article class="empty"><h1>Sorry, nothing here yet, please check back soon!</h1><div class="clearfix"></div></article>');
		};
	//other bits and bobs
		//make shop link open in a new window
		$j('#menu a[title|="shop"]').attr('target', '_blank');
		//Add in some placeholders for our newsletter subscribe form
		$j('#mc_mv_EMAIL').attr('placeholder', 'hello@example.com');
		$j('#mc_mv_FNAME').attr('placeholder', 'John');
		$j('#mc_mv_LNAME').attr('placeholder', 'Smith');
		$j('#mc_mv_MMERGE5').attr('placeholder', 'www.example.com');
		$j('#mc_mv_MMERGE9').attr('placeholder', 'Geraldton');
		//About page video
		$j('#player').hide();
		$j('#playtrigger').click(function () {
			$j(this).hide();
			$j('#player').show();
			return false;
		});
});