// zvents-mini-custom.js
// $Revision: 23149 $ - $Date: 2007-11-02 09:59:11 -0700 (Fri, 02 Nov 2007) $

// This file implements custom event list widgets.
// Include it after zvents-mini-base.js, or concatenate the two files.

(function( Z ) {
	
	// Partner ID and website base URL - edit these for your site
	Z.partner = 201;
	Z.site = 'http://calendar.tri-cityherald.com';
	
	var today = Z.Date.today();
	
	// Default settings and render functions for all widgets
	var base = {
		// Render the event date as tomorrow, or Friday, or 1/31
		date: function( event ) {
			if( this.showDate === false ) return '';
			if( event.date == today ) return this.showDate === true ? 'today' : '';
			if( event.date == today + Z.Date.oneDay ) return 'tomorrow';
			return Z.Date(event.date).format(
				event.date < today + Z.Date.oneDay*7 ? '{Sunday}' :
				'{M}/{DD}' );
		},
		
		// Render the list of events
		events: function( events ) {
			return [
				'<div class="ZventsEventList">',
					events.map(this.event,this).join(''),
				'</div>'
			].join('');
		},
		
		// Render a single event
		event: function( event ) {
			var date = this.date( event );
			if( date ) {
				date = [
					'<span class="ZventsEventDate">',
						this.date( event ),
					'</span>',
					' '
				].join('');
			}
			
			return [
				'<div class="ZventsEvent">',
					this.images ? this.image( event ) : '',
					'<span class="ZventsEventTime">',
						this.time( event ),
					'</span>',
					' ',
					date,
					'<a class="ZventsEventName" href="',  event.zurl, '">',
						Z.String.truncate( event.name, this.maxTitle || 40 ),
					'</a>',
				'</div>'
			].join('');
		},
		
		// Render the image(s) for an event
		image: function( event ) {
			var image = event.images[0];
			return ! image ? '' : [
				'<a class="ZventsImageLink" href="', event.zurl, '">',
					'<img class="ZventsImage" alt="Image" border="0" ',
						'src="', Z.imgThumb(image.url), '" ',
						//'width="', image.width, '" height="', image.height, '" ',
					'/>',
				'</a>'
			].join('');
		},
		
		// Render the "Loading" indicator
		loading: function() {
			return [
				'<div class="ZventsLoading">',
					'<img src="http://images.zvents.com/images/spinner16.gif" />',
					'<span> Loading events&#8230;</span>',
				'</div>'
			].join('');
		},
		
		// Render the event time as Noon, Midnight, 2 pm, or 2:30 pm
		time: function( event ) {
			var start = Z.Date(event.startTime), date = start.date;
			var hours = date.getUTCHours(), minutes = date.getUTCMinutes();
			return start.format(
				minutes ? '{h}:{mm} {am}' :
				{ 0:'Midnight', 12:'Noon' }[hours] || '{h} {am}'
			);
		}
	};
	
	function Widget( args ) {
		Z.Object.update( this, base, args /*(temp:*/, args.render/*:temp)*/ );
	}
	
	// The base event list widget - custom widgets extend this one
	var idNext = 1;
	Z.widget.eventList = function( args ) {
		// Combine the settings, write the container and spinner
		var widget = new Widget( args );
		if( ! args.id ) {
			args.id = 'ZventsWidget' + idNext++;
			document.write( [
				'<div id="', args.id, '">',
					widget.loading(),
				'</div>'
			].join('') );
		}
		
		if( args.load ) {
			// Call the core event list function with our partner ID
			Z.call( Z.EventList, {
				yields: function( events ) {
					// The event data is ready, sort it if requested
					if( widget.sort !== false )
						events.sort( 'starttime' );
					// Now render and display it
					var div = document.getElementById( args.id );
					div.innerHTML = widget.events( events );
				}
			}, args );
		}
		
		return args.id;
	};
	
	// A simple event list (the same as the base list in this demo)
	//Z.widget.customList1 = Z.extend( Z.widget.eventList, {
	//	// Any settings here would override the base Z.widget.eventList settings
	//});
	
	// Another way to code the same widget, allowing setup code before the base call
	//Z.widget.customList2 = function( args ) {
	//	Z.call( Z.widget.eventList, {
	//	}, args );
	//};
	
//-------------------------------------------------------------------------------------------------
// Simple tab clicker
//-------------------------------------------------------------------------------------------------
// <ul>
//     <li><a id="tabOne" onclick="tabber.click(this);">One</a></li>
//     <li><a id="tabTwo" onclick="tabber.click(this);">Two</a></li>
// </ul>
// <div id="divOne">
//     Tab One Content
// </div>
// <div id="divTwo">
//     Tab Two Content
// </div>
//-------------------------------------------------------------------------------------------------

tabber = {

	// Click a tab: give it the 'active' class and show its matching DIV
	click: function( clicked ) {
		var ul = clicked.parentNode.parentNode;  // A --> LI --> UL
		var tabs = ul.getElementsByTagName('a');
		
		for( i = 0;  i < tabs.length;  ++i ) {
			var a = tabs[i], on = ( a == clicked );
			a.className = ( on ? 'active' : '' );
			tabber.show( a.id.replace(/^tab/,'div'), on );
		}
	},
	
	// Special clicker for Zvents Today/Tomorrow/Search tabs:
	// hide or show footer, and load tomorrow's events on demand
	zclick: function( clicked, when ) {
		tabber.click( clicked );
		tabber.show( 'zventsFooter', when );
		
		if( ZventsTomorrowID && when == 'Tomorrow' ) {
			Z.widget.popular({
				id: ZventsTomorrowID,
				load: { when: when }
			});
			ZventsTomorrowID = null;
		}
	},
	
	// Show or hide a block level element
	show: function( id, show ) {
		document.getElementById(id).style.display =
			show ? 'block' : 'none';
	}
};

//-------------------------------------------------------------------------------------------------

})( ZventsMini );