$(function () {
  Banner.init();
});

Banner = {
	init: function () {
		Banner.selected = false;
		Banner.selected_src = null;

		var container = $('#homepageBanner');

		container.bind('menu-show-group', function (event, group) {
			Banner.unselect_group(group);
			Banner.select_group(group);
		});

		container.bind('grid-show-group', function (event, group) {
			Banner.map_group_selection('#thumbnailPanel', group, function () {
				$(this).hide();
			});

			Banner.map_group_not_selection('#imageGrid', group, function () {
				$(this).find('div.text').hide();
				Banner.move_element_to_thumbnail(this);
			});

			Banner.map_group_selection('#imageGrid', group, function () {
					var that = $(this);	
					that.removeAttr('style');
					that.find('div.text')
					      .css({ "font-size": "10px", "margin-left" : "5px" })
                .show();
			});

			Banner.map_group_selection('#thumbnailPanel', group, function () {
				$(this).find('div.text')
                .css({ "font-size": "10px" })
                .show();
				Banner.move_element_to_grid(this);			
			});

			Banner.resize();
		});

		$('#groupLabelPanel .section-hover').live('click', function (e) {
			Banner.text_reset();

			var g = $(this).attr('id');

			container.trigger('menu-show-group', [g]);
			container.trigger('grid-show-group', [g]);

			e.stopPropagation();
			$.tooltip.disable();
		});

		$('#thumbnailPanel > div').live('click', function (e) {
			Banner.text_reset();

			var g, groups, that = $(this);

			groups = Banner.to_groups(that);
			if (groups.length) {
				g = groups[0];
			}
			container.trigger('menu-show-group', [g]);

			that.hide();

			Banner.move_all_to_thumbnail();

			Banner.move_element_to_grid(that, 
				Banner.add_selected_image_style, 
				Banner.add_post_transition);

			e.stopPropagation();
		});

		$('#imageGrid > div').live('click', function (event) {
			Banner.text_reset();

			var that = this;

			$('#imageGrid > div').each(function () {
				if (this != that) {
					Banner.move_element_to_thumbnail(this);
				}
			});

			var g, groups = Banner.to_groups(that);
			if (groups.length) {
				g = groups[0];
			}
			container.trigger('menu-show-group', [g]);

			Banner.transition(that, Banner.add_selected_image_style, Banner.add_post_transition);

			event.stopPropagation();

			$.tooltip.disable();
		});

		$('#thumbnailPanel > div').live({
			mouseenter: function () { $(this).css({ "opacity": "1.0" }); },
			mouseleave: function () { $(this).css({ "opacity": "0.5" }); }
		});

		$('#imageGrid > div').each(function () { $(this).addClass('grid'); });
		$('#imageGrid > div div.text').hide();

		var snapshot = $('#imageGrid').html();

		$('#homepageBanner').live('click', function () {
			Banner.selected = false;
			Banner.unselect_group('');

			$('#imageGrid').html(snapshot);
			$('#thumbnailPanel').html('');

//			Banner.intro();
			Banner.tooltip();
			Banner.fading();
//			Banner.video();
		});

		Banner.intro();
		Banner.tooltip();
		Banner.fading();
		Banner.text();
//		Banner.video();

		$('a.remote').live('click', function () {
			window.open($(this).attr('href'));
			return false;
		});
	},
	intro: function () {
		$("ul#topList li, ul#botList li, #imageGrid > div").hide();
		$('h3#timeFor').hide().delay(1000).fadeIn(1200);

		$("ul#topList li, ul#botList li").each(function (i) {
			var me = $(this);

			setTimeout(
				function () {
					$(me).delay(2000).fadeIn(400);
				},
				(400 * i)
			);
		});

		$("#imageGrid > div").each(function (i) {
			var me = $(this);

			setTimeout(
				function () {
					$(me).delay(1900).fadeIn("slow");
				},
				(300 * i)
			);
		});
	},
	unselect_group: function (group) {
		var s, d, dst, src = $('#timeFor .selected');

		if (src.length && (src.attr('id') != group)) {
			dst = $('#groupLabelPanel .selected').removeClass('selected').show();

			s = src.offset();
			d = dst.offset();

			dst.hide();

			Banner.move(src, { start: s, end: d }, function () {
				src.remove();
				dst.show();
			});

		}
	},
	select_group: function (group) {
		var highlist, dst, s, d, container = $('#timeFor');
		var src = $('#groupLabelPanel #' + group);

		if (!src.hasClass('selected')) {
			src.addClass('selected');

			dst = src.clone();
			dst.appendTo(container);

			s = src.offset();
			d = dst.offset();

			dst.hide();

			Banner.move(src, { start: s, end: d }, function () {
				dst.show();
			});

		}
	},
	map_group_not_selection: function (container, group, func) {
		var element = $(container + ' > div[data-group]');
		//var element = $(container + ' > div[data-group!="' + group + '"]');
		element.each(function() {
			var groups = Banner.to_groups(this);
			if (0 > $.inArray(group, groups)) {
				func.apply(this);
			}
		});
	},
	map_group_selection: function (container, group, func) {
		var element = $(container + ' > div[data-group]');
		element.each(function() {
			var groups = Banner.to_groups(this);
			if (0 <= $.inArray(group, groups)) {
				func.apply(this);
			}
		});
	},
	move_element_to_thumbnail: function (el) {
		var s, d, size, dst, src = $(el);
		var container = $('#thumbnailPanel');

		Banner.remove_selected_image_style.apply(el);

		dst = src.clone();
		dst.addClass('thumbnail').css({ opacity: '0.5', visibility: 'hidden' }).appendTo(container);

		s = src.offset();
		d = dst.offset();

		size = { width: dst.css('width'), height: dst.css('height') };

		Banner.move(src, { start: s, end: d, size: size }, function () {
			src.remove();
			dst.css('visibility', 'visible');
		});
	},
	scale_factor: function (src, dst) {
		var x, y;

		x = parseInt(dst.css('width'), 10) / parseInt(src.css('width'), 10);
		y = parseInt(dst.css('height'), 10) / parseInt(src.css('height'), 10);

		return { x: x, y: y };
	},
	move_element_to_grid: function (el, func, donefunc) {
		var size, d, style, dst, src = $(el);
		var container = $('#imageGrid');

		src.show();
		style = src.attr('style');

		dst = src.clone().removeAttr('style').removeClass('thumbnail').appendTo(container);

		$.tooltip.disable();

		s = src.offset();
		d = dst.offset();

		size = { width: dst.css('width'), height: dst.css('height') };
		src.hide();

		dst.attr('style', style).css('visibility', 'hidden');

		Banner.move(src, { start: s, end: d, size: size }, function () {
			src.remove();
			dst.css('visibility', 'visible');

			Banner.transition(dst, function () {
				$(this).removeAttr('style');
				if (func) {
					func.apply(this);
				}
			}, donefunc);
		});
	},
	move_all_to_thumbnail: function () {
		$('#imageGrid > div').each(function () {
			Banner.move_element_to_thumbnail(this);
		});
	},
	add_selected_image_style: function () {
		var item = $(this);
		var image = item.find('img');
		var video = item.find('video');
		var text = item.find('div.text');

		item.css({
			"border": "10px solid black",
			"height": "280px",
			"width": "300px",
			"background-color" : "black",
		});

		image.css({
			"height": "auto",
			"width" : "300px",
			"margin": "0"
		});
		
		video.css({
			"height": "auto",
			"width": "auto",
			"max-width" : "100%",
			"margin": "40px 0 0 0",
     		"vertical-align": "top"
		});

		text.show();
		text.find('div.arrow').show();

		text.css({
			"margin": "0",
			"font-size" : "11px"
		});

		if (image.length) {
			Banner.selected_src = image.attr('src');
		} else {
			Banner.selected_src = video.attr('poster');
		}
	},
  add_post_transition: function() {
		var item = $(this);
		var image = item.find('img, video');

    if (image.is('video')) {
      Banner.hide_video_control(image, false);
    }
  },
	remove_selected_image_style: function () {
		var item = $(this);
		var text = item.find('div.text');

		var image = $('img, video', item);

    if (image.is('video')) {
      Banner.hide_video_control(image, true);
    }

		item.removeAttr('style');

		image.removeAttr('style');

		text.css({
			"margin-left": "5px"
		});

		Banner.selected_src = null;
	},
	transition: function (obj, func, donefunc) {
		var el = $(obj);
    var tag = el[0];

		el.addClass('transitionFX');
    
		if (func) {
			func.apply(tag);
		}

		Banner.addTransistionEndEventListener(tag, function (event) {
			$(event.target).removeClass('transitionFX');
      if (donefunc) {
        donefunc.apply(tag);
      }
		});
	},
	addTransistionEndEventListener: function (el, func) {

		var transitionEndEvent = "";

		if ($.browser.webkit) {
			transitionEndEvent = "webkitTransitionEnd";
		} else if ($.browser.mozilla) {
			transitionEndEvent = "transitionend";
		} else if ($.browser.msie) {
			transitionEndEvent = "MSTransitionEnd";
		} else if ($.browser.opera) {
			transitionEndEvent = "oTransitionEnd";
		}

		el.addEventListener(transitionEndEvent, func);
	},
	move: function (src, params, func) {
		var cfg = $.extend({ container: 'body' }, params);
		var start = cfg.start,
			end = cfg.end,
			size = cfg.size,
			t = src.clone();

		t.appendTo(cfg.container)
			.css({ position: 'absolute', top: start.top, left: start.left })
			.show()
			.addClass('transitionFX');

		src.hide();

		var el = t[0];

		t.css({
			top: end.top,
			left: end.left
		});

		if (size) {
			t.css({
				width: size.width,
				height: size.height
			});
		}

		if (cfg.scale) {
			var inner = $('.section-hover', t);

			if (inner) {
				inner[0].style.webkitTransform = 'scale(' + cfg.scale.x + ', ' + cfg.scale.y + ')';
			}
		}

		Banner.addTransistionEndEventListener(el, function (event) {
			if (func) {
				func.apply(event.target);
			}

			$(event.target).remove();
		});
	},
	tooltip: function () {
		$('#imageGrid > div').tooltip({
			bodyHandler: function () {
				var item = $(this);
				return '<span class="heading">' + item.attr('data-header') + '</span><span class="sub-heading">' + item.attr('data-sub') + '</span>';
			},
			showURL: false
		});

		$.tooltip.enable();
	},
	fading: function () {
		$('#imageGrid > div').hoverIntent(function () {
			     $(this).siblings().stop().animate({ opacity: 0.5 }, 'fast' );
			 }, function () {
        	$(this).siblings().stop().animate({ opacity: 1 }, 'fast' );
			},
			function () {
				if (Banner.selected) {
					return false;
				}
				Banner.fade_out();
			}
		);

		$('#groupLabelPanel li span').hoverIntent(
			function () {
				Banner.fade($(this));
			},
			function () {
				Banner.fade_out();
			}
		);
	},
	fade: function (element) {
		if (!Banner.selected) {
			Banner.fade_in(element);
		}
	},
	fade_in: function (element) {
		$('#imageGrid > div').each(function () {
			var item = $(this);
			var groups = Banner.to_groups(item);
			if (0 > $.inArray(element.attr('id'), groups)) {
				item.fadeTo("fast", 0.4);
			} else {
				item.fadeTo("fast", 1.0);
			}
		});
	},
	fade_out: function () {
		if (!Banner.selected) {
			$('#imageGrid > div').each(function () {
				$(this).fadeTo("fast", 1.0);
			});
		}
	},
	text: function (e) {
		$('div.text').live('click', function (event) {
			var text = $(this);
			var that = text.parent();
			var image = text.parent().find('img');
			var video = text.parent().find('video');
			var arrow = text.find('div.arrow span');
			var selected = false;
			var groups, group;

			if (image.length) {
				selected = Banner.selected_src == image.attr('src');
			} else {
				selected = Banner.selected_src == video.attr('poster');
			}

			if (!selected) {
				Banner.text_reset();

				$('#imageGrid > div').each(function () {
					if (that.get(0) != this) {
						Banner.move_element_to_thumbnail(this);
					}
				});

				groups = Banner.to_groups(that);
				if (groups.length) {
					group = groups[0];
				}

				$('#homepageBanner').trigger('menu-show-group', [group]);

				Banner.transition(that.get(0), Banner.add_selected_image_style);

				event.stopPropagation();

				$.tooltip.disable();

				return false;
			}

			if (arrow.hasClass('arrow-click')) {
				arrow.removeClass('arrow-click');

				text.find('span.copy').removeAttr('style');
				text.find('span.credit').hide('slow');
			} else {
				arrow.addClass('arrow-click');

				text.find('span.copy').css({ 'display': 'block', 'margin-bottom': '10px' });
				text.find('span.credit').show('slow');
			}
			
			e.stopPropagation();

			return false;
		});
	},
	text_reset: function () {
		$('div.text').each(function () {
			var text = $(this);
			var arrow = text.find('div.arrow span');

			arrow.removeClass('arrow-click');

			text.find('span.copy').removeAttr('style');
			text.find('span.credit').hide();
		});
	},
  hide_video_control: function(tag, flag) {
    if (flag) {
      $(tag).removeAttr('controls');
    } else {
      $(tag).attr('controls', '');
    }
  },
	video: function () {
    var image = item.find('img, video');

    function toggleControls() {
      if (video.hasAttribute("controls")) {
        video.removeAttribute("controls");
      } else {
        video.setAttribute("controls","controls");
      }
    }
  },
  video_stop: function () {
		$('video').each(function () {
			this.pause();
		});
	},
	resize: function () {
		$('div.smRect').addClass('smRect-selected');
		$('div.smallSq').addClass('smallSq-selected');
		$('div.largeSq').addClass('largeSq-selected');
	},
	images: function () {
		$('#imageGrid li').hoverIntent(
        function () {
        	if (Banner.selected || Banner.image_selected) {
        		return false;
        	}

        	var item = $(this);
        	var selected = item.find('img');

        	if (selected.length == 0) {
        		selected = item.find('video');
        	}

        	$('#imageGrid img, #imageGrid video').each(function () {
        		var image = $(this);

        		if (image.attr('class') == selected.attr('class')) {
        			image.fadeTo("fast", 1.0);
        		} else {
        			image.fadeTo("fast", 0.4);
        		}
        	});
        },
        function () {
        	if (Banner.selected || Banner.image_selected) {
        		return false;
        	}
        	Banner.fade_reset();
        }
    );

		$('#imageGrid li').live('click', function () {
			var item = $(this);
			var image = item.find('img');
			var video = item.find('video');
			var text = item.find('div.text');
			var arrow = text.find('div.arrow');

			var g, groups = Banner.to_groups(item);
			if (groups.length) {
				g = groups[0];
			}
			container.trigger('menu-show-group', [g]);
			container.trigger('grid-show-group', [g]);

			item.css({
				"border": "10px solid black",
				"height": "280px"
			});

			item.addClass('selected');

			if (image.length) {
				image.css({
					"margin": "0",
					"width": "400px"
				});
			} else {
				video.css({
					"margin": "0",
					"width": "350px !important",
					"height": "82%"
				});

				video.width(350);
			}

			text.css({
				"margin": "0",
				"width": "92%",
				"font-size" : "11px"
			});

			text.show("fast");
			text.find('div.arrow').show();

			arrow.css({
				"right": "5px",
				"bottom": "10px"
			});

			item.animate({ width: 350 }, { duration: 500 }, "fast");
			
			Banner.image_selected = true;

			if (image.length) {
				Banner.image_selected_src = image.attr('src');
			} else {
				Banner.image_selected_src = video.attr('poster');
			}

			$.tooltip.disable();

			Banner.add_styles();
			Banner.add_thumbwrap_styles();
			Banner.video_stop();
		});
	},
	move_images_thumb: function (id) {
		$('#imageGrid li img, #imageGrid li video').each(function () {
			var image = $(this);

			if (!image.hasClass(id)) {
				image.removeAttr('style');
				image.removeAttr("controls");

				var clone = image.clone();
				var dst = $('#thumbnailPanel');

				clone.appendTo(dst);
				clone.data('original', image);

				Banner.move(image, clone);
			}
		});

		Banner.add_thumbwrap_styles();
	},
	move_images_origin: function () {
		var src = $('#thumbnailPanel img');
		src.each(function () {
			var that = $(this);
			var dst = $('#imageGrid img[src="' + that.attr('src') + '"]');

			Banner.move(that, dst, function () {
				that.remove();
			});
		});

		var src_video = $('#thumbnailPanel video');

		src_video.each(function () {
			var that = $(this);
			var dst = $('#imageGrid video[poster="' + that.attr('poster') + '"]');

			Banner.move(that, dst, function () {
				that.remove();
			});
		});

		Banner.add_thumbwrap_styles();
	},
	add_thumbwrap_styles: function () {
		var wrap = $('#thumbnailPanel');

		wrap.css({
			"width": "120px",
			"float": "left",
			"height": "355px",
			"margin-top": "2px"
		});

		wrap.show();
	},
	add_styles: function () {
		$('#thumbnailPanel img').css({ 'opacity': '0.5' });
		$('#thumbnailPanel video').css({ 'opacity': '0.5' });
	},
	reset: function () {
		$('#bannerLeft,#bannerRight').hover(
        function () {
        	Banner.is_inside = true;
        },
        function () {
        	Banner.is_inside = false;
        });
		$('html').click(function () {
			if (!Banner.is_inside) {
				$('#thumbnailPanel').html(null);
				$('#thumbnailPanel').hide();
				$('#imageGrid > div').each(function () {
					var item = $(this);
					var image = item.find('img');
					var video = item.find('video');
					var text = item.find('div.text');
					var arrow = text.find('div.arrow');

					arrow.hide();

					item.css({
						"border": "none"
					});

					item.removeClass('selected');

					if (item.attr('class') == 'smRect') {
						item.width(210);
						item.height(105);
					} else if (item.attr('class') == 'smallSq') {
						item.width(105);
						item.height(105);
					} else if (item.attr('class') == 'largeSq') {
						item.width(315);
						item.height(210);
					}

					

					text.hide();
					text.find('span.copy').hide();
					text.find('span.credit').hide();
					text.find('div.arrow').hide();
					text.find('div.arrow span').removeClass('arrow-click');
					item.show();

					Banner.selected = false;
					Banner.image_selected = false;
					Banner.image_selected_src = null;
					Banner.is_inside = false;

					$(this).show();
				});

				$('#timeFor').text('TIME FOR: ');
				$('#bannerRight li a').each(function () {
					$(this).show();
				});

				$.tooltip.enable();
			}
		});
	},
	to_groups: function(el) {
		return $(el).data('group').split(' ');
	}
}