if (!window.console) {
	console = {};
	console.log = function() {};
}

SiloNavigation = {};

(function(app) {
	
	app.config = {
		thumbs		: 	{
							rowMax		: 4,
							marginLeft	: 217,
							marginTop	: 160,
							topStart 	: 0,
							leftStart 	: 0
						},
		transitions	: 	{
							viewAll				: 1000,
							thumbDelay			: 100,
							thumbFadeIn			: 1000,
							thumbContainerHeight: 1000,
							scrollTopkey		: 500 
						},
		flashId 	:  	""
	};
	
	app.data = {};
	app.elements = {};	
	 
	app.init = function(flashId, containerId, datasource)
	{
		app.isIE6 = (JQ.browser.msie && JQ.browser.version < 7);
		
		this.config.flashId = flashId;		
		this.elements.flashElement = JQ("#" + flashId);
		this.elements.container = JQ("#" + containerId);
		this.Ajax.load(datasource);
	};
	
	// ajax
	app.Ajax = {
		load : function(datasource)
		{
			// load JSON
			JQ.getJSON(datasource + "?" + Math.random(), app.Ajax.complete);
		},
		
		complete : function(response)
		{
			
			// set data
					app.data = response;
					
			if (app.data.mode != "howitworks"){
			// populate thumbs
			app.Thumbs.init();	
			}
			
			// if history, init timeline
			if (app.data.mode == "history") {
				app.Timeline.init();
			}
			// if products, init timeline
			if (app.data.mode == "products") {
				app.TimelineReverse.init();

			}
			if (app.data.mode == "howitworks"){
			app.ThumbsHowItWorks.init();
			}
			if (app.isIE6) {
				supersleight.limitTo(app.elements.container.attr("id"));
				supersleight.run();	
			}
		}
	}
	
	// timeline
	app.Timeline = {
		
		init : function()
		{
			app.elements.timeline = JQ("<div></div>").attr("id", "timeline");
			app.elements.handleMin = JQ("<div></div>").attr("id", "handle-min").addClass("ui-slider-handle").text(app.data.config.min);
			app.elements.handleMax = JQ("<div></div>").attr("id", "handle-max").addClass("ui-slider-handle").text(app.data.config.max);
			app.elements.timeline.append(app.elements.handleMin).append(app.elements.handleMax);
			app.elements.container.prepend(app.elements.timeline);

			// initilize slider
			app.elements.timeline.slider({range: true, animate: false, min: app.data.config.min, max: app.data.config.max, values: [app.data.config.min, app.data.config.max]});
			app.elements.timeline.bind("slidechange", app.Timeline.slidechange);
			app.elements.timeline.bind("slide", app.Timeline.slide);
			
			// set range element
			app.elements.range = JQ(".ui-slider-range");
		
			// view all
			app.Timeline.viewAll(app.config.transitions.viewAll);
		},
		
		slidechange : function(event, ui)
		{
			app.Thumbs.update();
		},
		
		slide : function(event, ui)
		{
			app.Timeline.updateHandles();
		},
		
		updateHandles : function()
		{
			// update text
			app.elements.handleMin.text(app.elements.timeline.slider("value", 0));
			app.elements.handleMax.text(app.elements.timeline.slider("value", 1));
		},
		
		viewAll : function(duration)
		{
			// reset animation
			app.elements.handleMin.animate( {left: 0 }, duration);
			app.elements.handleMax.animate( {left: app.elements.timeline.width() - app.elements.handleMax.width() - 42}, duration);
			app.elements.range.animate({left: 10, width: app.elements.timeline.width() - app.elements.handleMax.width() - 10}, duration);
			
			// reset text
			app.elements.handleMin.text(app.data.config.min);
			app.elements.handleMax.text(app.data.config.max);
			
			// show all
			app.Thumbs.update(app.data.config.min, app.data.config.max);
		}
	}
	
	// timeline for products
	/*app.TimelineReverse = {
		
		init : function()
		{
			app.elements.timeline = JQ("<div></div>").attr("id", "timeline");
			app.elements.handleMin = JQ("<div></div>").attr("id", "handle-minrev").addClass("ui-slider-handle").text(app.data.config.min);
			app.elements.handleMax = JQ("<div></div>").attr("id", "handle-maxrev").addClass("ui-slider-handle").text(app.data.config.max);
			app.elements.timeline.append(app.elements.handleMax).append(app.elements.handleMin);
			app.elements.container.prepend(app.elements.timeline);

			// initilize slider
			app.elements.timeline.slider({range: true, animate: false, min: app.data.config.min, max: app.data.config.max, values: [app.data.config.min, app.data.config.max]});
			app.elements.timeline.bind("slidechange", app.TimelineReverse.slidechange);
			app.elements.timeline.bind("slide", app.TimelineReverse.slide);
			
			// set range element
			app.elements.range = JQ(".ui-slider-range");
		
			// view all
			//app.TimelineReverse.viewAll(app.config.transitions.viewAll);
		},
		
		slidechange : function(event, ui)
		{
			app.Thumbs.update();
		},
		
		slide : function(event, ui)
		{
			app.TimelineReverse.updateHandles();
		},
		
		updateHandles : function()
		{
			// update text
			app.elements.handleMin.text(app.elements.timeline.slider("value", 0));
			app.elements.handleMax.text(app.elements.timeline.slider("value", 1));
		},
		
		viewAll : function(duration)
		{
			// reset animation
			app.elements.handleMax.animate( {left: 0 }, duration);
			app.elements.handleMin.animate( {left: app.elements.timeline.width() - app.elements.handleMin.width() - 42}, duration);
			app.elements.range.animate({left: 10, width: app.elements.timeline.width() - app.elements.handleMin.width() - 10}, duration);
			
			// reset text
			app.elements.handleMin.text(app.data.config.min);
			app.elements.handleMax.text(app.data.config.max);
			
			// show all
			app.Thumbs.update(app.data.config.min, app.data.config.max);
		}
	}
	*/
	
	// thumbs
	app.Thumbs = {
		init : function()
		{
			// set thumb container
			app.elements.thumbContainer = JQ("<div></div>").attr("id", "thumbs");
			app.elements.container.append(app.elements.thumbContainer);
		
			var left = app.config.thumbs.leftStart;
			var top = app.config.thumbs.topStart;
			var num = 0;
			
			app.elements.selectedBox = JQ("<div></div>").attr("id", "selectedBox");
			app.elements.thumbContainer.append(app.elements.selectedBox);
			
			JQ.each(app.data.items, function(i, data) {
				
				if ( data.visible != false ) {
					
					if ( i % app.config.thumbs.rowMax == 0 && i > 0) {
						top += app.config.thumbs.marginTop;
						left = app.config.thumbs.leftStart;
					}
			
					var image = new Image();
					JQ(image).load(function(){
						JQ(this).hide();
						JQ(this).fadeIn();
					});
					JQ(image).attr("src", data.thumb).attr("alt", data.title.replace("<br/>", " ")).attr("title", data.title.replace("<br/>", " "));

					var imageDiv = JQ("<div></div>").addClass("image").append(image);
				
					var year = JQ("<div></div>").addClass("year").text(data.year);
					var divider = JQ("<div></div>").addClass("divider");
					var title = JQ("<div></div>").addClass("title").html(data.title);
					
					if(data.size)
						JQ(title).css('font-size', data.size + 'px').css('line-height', ( data.size + 4 ) + 'px');
					
					if(data.top)
						JQ(title).css('margin-top', data.top + 'px');
					
					var label = JQ("<div></div>").addClass("label").append(year).append(divider).append(title);				
				
					var thumb = JQ("<div></div>").attr("id", data.id).addClass("thumb").append(imageDiv).css("left", left).css("top", top);
					thumb.append(label);
			
					app.elements.thumbContainer.append(thumb);				
				
					thumb.data("year", data.year);
					
					thumb.hover(app.Thumbs.thumbOver, app.Thumbs.thumbOut);
				
					thumb.click(app.Thumbs.thumbClick);
			
					thumb.hide().animate({top: top}, app.config.transitions.thumbDelay * i).fadeIn(app.config.transitions.thumbFadeIn);				
				
					left += app.config.thumbs.marginLeft;
					num++;
				}
			});			
			
		/*	if (app.data.mode != "history") {
				app.Thumbs.updateThumbContainerHeight(top + app.config.thumbs.marginTop);
				return;
			}
			*/
			app.elements.viewAll = JQ("<div></div>").attr("id", "view-all");
			app.elements.viewAll.append(JQ("<p></p>").text(app.data.copy.viewAll));
			
			var viewAllButton = JQ("<div></div>").addClass("small-button").append(JQ("<span class='left'></span>"))
									.append(JQ("<span class='base'><a href='javascript:void(0);'>" + app.data.copy.viewAllBtn + "</a></span>"))
									.append(JQ("<span class='right'></span>"));
			
			app.elements.viewAll.append(viewAllButton);
			app.elements.viewAll.click(app.Thumbs.viewAllClick);
			app.elements.thumbContainer.append(app.elements.viewAll);
		},
		
		update : function(start, stop)
		{
			if (start == undefined)	
				start = app.elements.timeline.slider("value", 0);

			if (stop == undefined)
				stop = app.elements.timeline.slider("value", 1);
			
			var left = app.config.thumbs.leftStart;
			var top = app.config.thumbs.topStart;	
			var num = 0;

			app.elements.viewAll.stop(true, true).hide();	
			JQ("#thumbs .thumb").each(function (i) {

				var thumb = JQ(this);
				thumb.stop(true, true).hide();

				if ( thumb.data("year") >= start && thumb.data("year") <= stop ) {
					
					if ( num % app.config.thumbs.rowMax == 0 && num > 0) {
						top += app.config.thumbs.marginTop;
						left = app.config.thumbs.leftStart;
					}
					
					num++;
					thumb.css({top: top, left: left}).animate({top: top}, app.config.transitions.thumbDelay * num).fadeIn(app.config.transitions.thumbFadeIn);
					
					left += app.config.thumbs.marginLeft;
				}
				
			});	

			app.Thumbs.updateViewAll(num, app.data.items.length-1, left, top);
		},
		
		updateViewAll : function(num, total, left, top)
		{
			
			if ( num % app.config.thumbs.rowMax == 0 && num > 0) {
				top += app.config.thumbs.marginTop;
				left = app.config.thumbs.leftStart;
			}
			
			app.elements.viewAll.find("p:first").text(app.data.copy.viewAll.replace("$num", num).replace("$total", total));
			app.elements.viewAll.css("left", left).css("top", top).animate({top: top}, app.config.transitions.thumbDelay * num).fadeIn(app.config.transitions.thumbFadeIn);	
	
			app.Thumbs.updateThumbContainerHeight(top + app.config.thumbs.marginTop);
		},
		
		updateThumbContainerHeight : function(height)
		{
			app.elements.thumbContainer.animate( {height : height}, app.config.transitions.thumbContainerHeight);
		},
		
		thumbOver : function()
		{
		//	if (app.isIE6) return;
			JQ(this).addClass("selected");
			app.elements.selectedBox.show().css("top", JQ(this).css("top")).css("left", JQ(this).css("left"));
		},
		
		thumbOut : function()
		{
		//	if (app.isIE6) return;
			app.elements.selectedBox.hide();
			JQ(this).removeClass("selected");
		},
		
		thumbClick : function()
		{
			document.getElementById(app.config.flashId).firstChild.load(this.id);
			JQ( "html, body" ).animate({scrollTop: 0}, app.config.transitions.scrollTop);
		},
		
		viewAllClick : function()
		{
			app.Timeline.viewAll(app.config.transitions.viewAll);
		}
	};
app.ThumbsHowItWorks = {
		init : function()
		{
		JQ('div .thumb').hover(function(){
		JQ(this).addClass("selected");
		}, function(){
		JQ(this).removeClass("selected");
		});
		JQ('div .thumb').click(function(){
		section = (this.id);
		window.location = "cd_products#id=" + section;
		//document.getElementById(app.config.flashId).firstChild.load(this.id)
		});
		JQ('div .readmore').click(function(){
		//JQ(document.getElementById(app.config.flashId).firstChild.load(this.id));
		section = (this.id);
		window.location = "cd_products#id=" + section;
		});
		}
	};
})(SiloNavigation);