if (!Visi)
	var Visi = {};

Visi.Grid =
{
	colCount: null,
	currentHeight: 0,
	data: null,
	widgetCache: [],

	init: function()
	{
		$(document.body).append('<div id="widget_cache" style="display:none">')

		$.getJSON('/api/content/home', function(data) 
		{
			Visi.Grid.data = data.data;
			Visi.Grid.currentHeight += 2000;
			Visi.Grid.resize();

			$(window).resize(Visi.Grid.resize);
		});

		$('#more_content .button').click(function()
		{
			Visi.Grid.currentHeight += 1000;
			Visi.Grid.populate();
		});
	},

	createElement: function(itemIndex)
	{
		var item = Visi.Grid.data.items[itemIndex];
		var urlVars = 'type/' + item.type + '/id/' + item.id + '/width/' + item.size[0] + '/height/' + item.size[1];
		if (item.ad_position)
			urlVars += '/ad_position/' + item.ad_position;
		var $el = $('<div>')
			.addClass('widget_home')
			.css({
				width: item.size[0] + 'px',
				height: item.size[1] + 'px',
				overflow: "hidden"
				//"background-color": '#f0f0f0'
			})
			.attr({
				'data-fetched': 'false',
				'data-item-index': itemIndex,
				'data-url': '/api/content/widget/' + urlVars
			});
		$el.append('\
			<div style="width:' + item.size[0] + 'px; height:' + item.size[1] + 'px; background: #e3e3e3;">\
				<div style="width:' + (item.size[0] - 2) + 'px; height:' + (item.size[1] - 2) + 'px; background: white; position: relative; top: 1px; left: 1px;">\
					<img src="themes/visi_website/assets/images/ajaxload.gif" style="position:relative; top:' + ((item.size[1] - 16) * .5) + 'px; left:' + ((item.size[0] - 16) * .5) + 'px;" />\
				</div>\
			</div>\
		');
		return $el;
	},

	fetchWidgets: function()
	{
		$widgets = $("div(data-fetched='false').widget_home");
		var t = 0;
		var queue = [];
		$widgets.each( function()
		{
			var $widget = $(this);

			$widget.attr({'data-fetched': 'true'});

			var itemIndex = $widget.attr('data-item-index');
			var url = $widget.attr('data-url');

			if (Visi.Grid.widgetCache[itemIndex])
			{
				//$widget.replaceWith(Visi.Grid.widgetCache[itemIndex]);
				$widget.html(Visi.Grid.widgetCache[itemIndex]);
				Visi.Grid.prepareWidget($widget);
				return;
			}

			var pos = $widget.position();
			var priority = -pos.top * 2000 - pos.left;

			queue.push({widget: this, itemIndex: itemIndex, priority: priority});
		});

		queue.sort(function(a, b) {
			if (a.priority < b.priority)
				return 1;
			else
				return -1;
		});
		
		for (var i in queue)
		{
			var $widget = $(queue[i].widget);
			(function($widget, itemIndex) {
				var url = $widget.attr('data-url');
				setTimeout(function() {
					$.get(url, function(data)
					{
						$widget.html(data);
						Visi.Grid.prepareWidget($widget);
						Visi.Grid.widgetCache[itemIndex] = data;//$widget.clone();
						//$widget.css({opacity: 0}).animate({opacity: 1, delay: 500}, 300);
						$widget.hide().show();
					});
				}, i * 100);
			})($widget, queue[i].itemIndex);


		}
	},

	prepareWidget: function($widget)
	{
		$('.widg_roll, .embedvid', $widget).hide();
		$('.btn_info a', $widget).click(function(event) {
			event.preventDefault();
			$(this).parent().parent().siblings('.widg_roll').stop(true, true).show();
		});
		$('.playvid', $widget).click(function(event) {
			event.preventDefault();
			$('img',this).hide();
			$(this).hide();
			$(this).siblings('.embedvid').show();
		});

		$('.widget_home, .widget_covet', $widget).hover(function () {
			if ($('.widg_roll',this).length > 0)
			{
				//$('*', this).css({display: 'block', opacity: 1})
				$('.widg_roll, .widg_roll *',this).stop(true, true).show();
			}
		}, function () {
			if ($('.widg_roll',this).length > 0)
				$('.widg_roll, .widg_roll *',this).stop(true, true).hide();
		});
	},


	populate: function()
	{
		var items = Visi.Grid.data.items;
		var layout = Visi.Grid.data.layouts[Visi.Grid.colCount];

		var $home = $('#home');
		$home.html('');
		for (var i = 0; i < Visi.Grid.colCount; i++)
		{
			var colNum = i + 1;
			var colHeight = 0;
			var $col = $('<div>').attr({id: 'widget_col' + colNum}).addClass('widget_col').appendTo($home);
			
			for (var j = 0; j < layout[i].length; j++)
			{
				if (colHeight < Visi.Grid.currentHeight)
				{
					var itemIndex = layout[i][j];
					var element = Visi.Grid.createElement(itemIndex);
					$col.append(element);
					colHeight += items[itemIndex].size[1] + 6;
				}
			}
			$home.append($col);
		}		
		$home.append('<div class="clearboth"></div>');

		Visi.Grid.fetchWidgets();
	},

	resize: function()
	{
		var availWidth = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - 190;

		var colCount = 2;
		var colWidth = 304 + 428;
		while (colWidth + 304 < availWidth && colCount < 5)
		{
			colWidth += 304;
			colCount ++;
		}

		if (Visi.Grid.colCount != colCount)
		{
			Visi.Grid.colCount = colCount;
			Visi.Grid.populate();
		}
	}


}