//---------------------------------------------------------------
// brunswick.fx.pack.js
//
// Assumes use of Mootools v1.11
//---------------------------------------------------------------
//-- Hacked to from original Mootools Fx.Accordion

Fx.Fan = Fx.Elements.extend({
	now: Array(),

	extendOptions: function(options){
		Object.extend(this.options, Object.extend({
			start: 'open-first',
			fixedHeight: false,
			fixedWidth: false,
			alwaysHide: false,
			wait: false,
			onActive: Class.empty,
			onBackground: Class.empty,
			height: true,
			opacity: true,
			width: false
		}, options || {}));
	},

	initialize: function(togglers, elements, options){
		this.parent(elements, options);
		this.extendOptions(options);
		this.previousClick = 'nan';
		togglers.each(function(tog, i){
			$(tog).addEvent('click', function(){this.toggleThis(i)}.bind(this));
		}, this);
		this.togglers = togglers;
		this.h = {}; this.w = {}; this.o = {};
		this.elements.each(function(el, i){
			this.now[i] = {};
			$(el).setStyles({'height': 0, 'overflow': 'hidden'});
			closeElement = new Element('a').setProperty('href','#').setHTML('Close');
			closeElement.addEvent('click', function(){ this.toggleThis(i)}.bind(this));
			closeElement.injectInside(el);
		}, this);
		switch(this.options.start){
			case 'first-open': this.elements[0].setStyle('height', this.elements[0].scrollHeight+this.options.unit); break;
			case 'open-first': this.toggleThis(0); break;
		}
	},

	hideThis: function(i){
		if (this.options.height) this.h = {'height': [this.elements[i].offsetHeight, 0]};
		if (this.options.width) this.w = {'width': [this.elements[i].offsetWidth, 0]};
		if (this.options.opacity) this.o = {'opacity': [this.now[i]['opacity'] || 1, 0]};
	},

	showThis: function(i){
		if (this.options.height) this.h = {'height': [this.elements[i].offsetHeight, this.options.fixedHeight || this.elements[i].scrollHeight]};
		if (this.options.width) this.w = {'width': [this.elements[i].offsetWidth, this.options.fixedWidth || this.elements[i].scrollWidth]};
		if (this.options.opacity) this.o = {'opacity': [this.now[i]['opacity'] || 0, 1]};
	},

	toggleThis: function(iToShow){
		var objObjs = {};
		var err = false;
		var madeInactive = false;

		this.now[iToShow] = this.now[iToShow] || {};
		if (this.elements[iToShow].offsetHeight == this.elements[iToShow].scrollHeight){
			this.hideThis(iToShow);
			madeInactive = true;
		} else if (this.elements[iToShow].offsetHeight == 0){
			this.showThis(iToShow);
		} else {
			err = true;
		}

		objObjs[iToShow] = Object.extend(this.h, Object.extend(this.o, this.w));

		if (err) return;
		if (!madeInactive) this.options.onActive.call(this, this.togglers[iToShow], iToShow);
		if ( madeInactive) this.options.onBackground.call(this, this.togglers[iToShow], iToShow);
		return this.custom(objObjs);
	}
});

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

var brandNavigatorWidget = new Class({
	categoryMembers: Array(),
	currentCategoryIdx: -1,
	currentCategoryName: "",

	initialize: function( jsonURL ) {
		this.xhr = new Ajax(jsonURL+"?20070417", { method: 'get', onComplete: this.renderBrands.bind(this) } ).request();
	}, // constructor..initialize

	renderBrands: function(responseText) {
		try {
			this.JSONdata = Json.evaluate(responseText);
		} catch(e) {
			alert("brandNavigatorWidget :: There was difficulty in retriving data for this table.");
			return false;
		} // try..catch

		with(this.JSONdata) {
			//-- generate category links/list
			html  = '';
			categories.each( function(category,idx) {
				html += '<li><a href="#" id="category'+idx+'">'+category.name+'</a></li>';
			});
			$('brandCategories').setHTML(html);
			categories.each( function(category,idx) {
				$('category'+idx).addEvent( 'click', function() { this.renderCategoryDesc(idx) }.bind(this) );
				$('category'+idx).addEvent( 'mouseover', function() {
					this.dimCategory(this.currentCategoryIdx);
					this.currentCategoryIdx = idx;
					this.highlightCategory(idx);
					this.dimMemberBrands(this.currentCategoryName);
					this.currentCategoryName = category.name;
					this.highlightMemberBrands(category.name)
				}.bind(this) );
			}.bind(this));

			//-- generate logo table
			html  = '';
			html += '<div id="logoTableHeader"><img src="/_media/images/brands/select.gif" alt="" width="289" height="7" /></div>';
			html += '<table cellspacing="0" cellpadding="0" class="logosTable"><tbody>'+"\n";
			brands.each( function(brand,idx) {
				html += ((idx % divisionBrandColumns)+1)==1 ? '<tr>'+"\n" : '';
				html += ((idx % divisionBrandColumns)+1)==divisionBrandColumns ? '<td class="lastcolumn">' : '<td>';
				html += '<a href="#" id="'+brand.id+'"></a><img src="'+navigatorImages.path+brand.logoGraphic+'" width="'+navigatorImages.width+'" height="'+navigatorImages.height+'" alt="'+brand.name+' Logo" title="'+brand.name+' Logo"/></td>'+"\n";
				html += '</td>';
				html += ((idx % divisionBrandColumns)+1)==divisionBrandColumns ? '</tr>'+"\n" : '';
			}.bind(this));
			html += '</tr></tbody></table>'+"\n";
			$('layer_logos').setHTML(html);

			//-- link up the event handlers
			brands.each( function(brand) {
				$(brand.id).addEvent( 'click', function() { this.renderBrandDetail(brand) }.bind(this) );
			}.bind(this));

			//-- collect categoryMemberships
			categories.each( function(category,idx) {
				this.categoryMembers[category.name] = Array();
			}.bind(this));

			brands.each( function(brand) {
				brand.memberCategories.each( function(category) {
					this.categoryMembers[category].push(brand);
				}.bind(this)); // each..category
			}.bind(this)); // each..brand
		} // with..this.JSONdata

	}, // method..renderValues

	dimCategory: function(idx) {
		if(idx!=-1) $('category'+idx).removeClass('on_category');
	}, // method..dimCategory

	highlightCategory: function(idx) {
		$('category'+idx).addClass('on_category');
	}, // method..highlightCategory

	dimMemberBrands: function(categoryName) {
		if(categoryName!='') {
			for(i=0;this.categoryMembers[categoryName].length>i;i++) {
				$(this.categoryMembers[categoryName][i].id).removeClass('on_logo');
			} // for
		} // if
	}, // method..dimMemberBrands

	highlightMemberBrands: function( categoryName ) {
		for(i=0;this.categoryMembers[categoryName].length>i;i++) {
			$(this.categoryMembers[categoryName][i].id).addClass('on_logo');
		} // for
	}, // method..highlightMemberBrands

	renderCategoryDesc: function( categoryIdx ) {
		$('layer_detailinfo').style.display = 'none';

		with(this.JSONdata) {
			$('categoryName').setHTML(categories[categoryIdx].name);
			$('categoryDescription').setHTML(categories[categoryIdx].description);

			html  = '';
			this.categoryMembers[categories[categoryIdx].name].each( function( brand,idx ) {
				html += '<a href="#" class="on_logo" id="categoryMember'+idx+'"><img src="'+categoryImages.path+brand.logoGraphic+'" width="'+categoryImages.width+'" height="'+categoryImages.height+'" alt="'+brand.name+' Logo" title="'+brand.name+' Logo"/></a>';
			}.bind(this));

			html  = '';
			html += '<table cellspacing="0" cellpadding="0" class="logosTable"><tbody>'+"\n";
			rowCount = 1;
			maxRows = Math.ceil(this.categoryMembers[categories[categoryIdx].name].length / categoryBrandColumns)
			this.categoryMembers[categories[categoryIdx].name].each( function(brand,idx) {
				if(rowCount==maxRows) {
					html += ((idx % categoryBrandColumns)+1)==1 ? '<tr class="lastrow">'+"\n" : '';
				} else {
					html += ((idx % categoryBrandColumns)+1)==1 ? '<tr>'+"\n" : '';
				} // if..else
				if(((idx % categoryBrandColumns)+1)==categoryBrandColumns) {
					html += '<td class="lastcolumn">';
				} else if((idx+1)==this.categoryMembers[categories[categoryIdx].name].length) {
					html += '<td class="lastcolumn">';
				} else {
					html += '<td>';
				} // if..else
				html += '<a href="#" class="on_logo" id="categoryMember'+idx+'"></a><img src="'+categoryImages.path+brand.logoGraphic+'" width="'+categoryImages.width+'" height="'+categoryImages.height+'" alt="'+brand.name+' Logo" title="'+brand.name+' Logo"/>'+"\n";
				html += '</td>'+"\n"
				if(((idx % categoryBrandColumns)+1)==categoryBrandColumns) {
					html += '</tr>'+"\n";
					rowCount++;
				} // if
			}.bind(this));
			html += '</tr></tbody></table>'+"\n";
			$('categoryMemberLogos').setHTML(html);

			//-- link up the event handlers
			this.categoryMembers[categories[categoryIdx].name].each( function( brand,idx ) {
				$('categoryMember'+idx).addEvent( 'click', function() { this.renderBrandDetail(brand) }.bind(this) );
			}.bind(this));
		} // with..this.JSONdata

		$('layer_categoryinfo').style.display = 'block';
	}, // method..renderCategoryDesc

	renderBrandDetail: function( brand ) {
		this.dimCategory(this.currentCategoryIdx);
		$('layer_categoryinfo').style.display = 'none';
		$('brandLogoLarge').setHTML('<img src="'+this.JSONdata.detailImages.path+brand.logoGraphic+'" width="'+this.JSONdata.detailImages.width+'" height="'+this.JSONdata.detailImages.height+'" alt="'+brand.name+' Logo" title="'+brand.name+' Logo"/>');

		html  = '';
		html += '<table cellspacing="0" cellpadding="0" id="brandDetailTable">';
		html += '<tbody>';
		html += '<tr valign="top"><th colspan="2">'+brand.name+'</th></tr>';
		html += '<tr valign="top"><td>Category</td><td class="rightcell">'+brand.presentableCategories+'</td></tr>';
		brand.details.each( function( detail ) {
			for(property in detail) {
				html += '<tr valign="top"><td class="leftcell">'+property+'</td><td class="rightcell">'+detail[property]+'</td></tr>';
			} // for
		});

		html += '<tr valign="top"><td class="leftcell">Web '+(brand.URLs.length==1 ? "site" : "sites")+'</td><td class="rightcell">';
		brand.URLs.each( function( url,idx ) {
			for(property in url) {
				html += '<a href="'+property+'" target="_blank">'+((url[property]=='*SAME*') ? property : url[property])+'</a><br />';
			} // for
		});
		html += '</td></tr>';

		html += '</tbody>';
		html += '</table>';
		$('brandDetails').setHTML(html);

		$('layer_detailinfo').style.display = 'block';
	}, // method..renderCategoryDesc

	closePane: function( id ) {
		$(id).style.display = 'none';
		this.dimCategory(this.currentCategoryIdx);
		this.dimMemberBrands(this.currentCategoryName)
	} // method..closePane

}); // brandNavigatorWidget..class

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

var timelineNavigatorWidget = new Class({
	currentEventIdx : -1,

	initialize: function( jsonURL ) {
		document.onkeydown = this.keyboardListener.bindAsEventListener(this);
		this.xhr = new Ajax(jsonURL+"?20070417", { method: 'get', onComplete: this.renderTimeline.bind(this) } ).request();
	}, // constructor..initialize

	keyboardListener: function(event) {
		//-- Safari needs all these returns ... or else ...
		switch(event.keyCode) {
			case 37: case 80: this.previous(); return false; break;
			case 39: case 78: this.next();  return false; break;
		} // switch
		return true;
	}, // method..keyboardListener

	previous: function() {
		this.renderEventDetail((this.currentEventIdx==0) ? this.currentEventIdx : this.currentEventIdx - 1);
	}, // method..previous

	next: function() {
		this.renderEventDetail((this.currentEventIdx==this.JSONdata.events.length-1) ? this.currentEventIdx : this.currentEventIdx + 1);
	}, // method..next

	renderTimeline: function(responseText) {
		try {
			this.JSONdata = Json.evaluate(responseText);
		} catch(e) {
			alert("timelineNavigatorWidget :: There was difficulty in retriving data for this timeline.");
			return false;
		} // try..catch

		with(this.JSONdata) {
			html  = '';
			timelineDecades.each( function(item) {
				html +='<div id="year'+item.decade+'" style="z-index:99;position:absolute;left:'+(item.position*11)+'px"><img src="/_media/images/company/history/timeline/'+item.decade+'.gif" alt="'+item.decade+'" /></div>';
			});
			$('years').setHTML(html);

			html  = '';
			events.each( function(event,idx) {
				html +='<div id="eventBullet'+idx+'" class="onepoint" style="position:absolute;left:'+(event.position*11)+'px"><a href="#"><img src="/_media/images/common/spacer.gif" alt="" width="2" height="2" /></a></div>';
			});
			$('timepoints').setHTML(html);

			html  = '';
			classStyle = '';
			events.each( function(event,idx) {
				if(event.position<60) {
					classStyle = ' class="pointflag" style="display:none;left:'+((event.position*11)+26)+'px"';
				} else {
					classStyle = ' class="pointflagRight" style="display:none;right:'+(((64-event.position)*11)+24)+'px"';
				} // if..else
				html +='<div id="eventFlag'+idx+'" '+classStyle+'><table cellspacing="0" cellpadding="0"><tr><td><em>'+event.year+'</em></td><td class="right"></td></tr><tr><td class="bottom"></td><td class="corner"></td></tr></table></div>';
			});
			$('yearFlags').setHTML(html);

			events.each( function(event,idx) {
				$('eventBullet'+idx).addEvent('mouseover', function() {
					$('eventFlag'+idx).setStyle('display','block');
				});
				$('eventBullet'+idx).addEvent('mouseout', function() {
					$('eventFlag'+idx).setStyle('display','none');
				});
				$('eventBullet'+idx).addEvent('click', function() {
					if(this.currentEventIdx!=idx) {
						this.renderEventDetail(idx);
					} // if
				}.bind(this));
			}.bind(this));
		} // with..this.JSONdata

		this.renderEventDetail(0);
	}, // method..renderTimeline

	renderEventDetail: function( eventIdx ) {
		if(this.currentEventIdx!=-1) $('eventBullet'+this.currentEventIdx).removeClass('onepoint_on');
		this.currentEventIdx=eventIdx;
		$('eventBullet'+this.currentEventIdx).addClass('onepoint_on');

		with(this.JSONdata.events[eventIdx]) {
			$('eventGraphic').setHTML('<img src="'+(this.JSONdata.largeImages.path+graphic)+'" alt="" width="324" height="253" />');
			$('eventHeadline').setHTML(title);
			$('eventCopy').setHTML(detail);
			$('eventYear').setHTML(year);
		} // with..this.JSONdata.events[eventIdx]
	} // method..renderEventDetail

}); // timelineNavigatorWidget..class