var panels = {
	_moving: false,
	_duration: .5,
	_loaded_image_index: 0,
	_auto:0,
	_auto_index:0,
	_auto_delay: 5,
	
	data: 0,	
	
	init: function(data) {
		panels.data = data;
		for(var i = 0, j = panels.data.length; i < j; ++i) {
			$('slider').insert({bottom: '<li class="' + panels.data[i].css + '"><h2 onclick="panels.toggle(this,'
				+ i + ')">' + panels.data[i].title + '</h2><div style="display:none"><p>'
				+ panels.data[i].description + '</p><a href="'	+ panels.data[i].link + '" class="more rollover"><img src="art/more.png" alt="More" /></a></div></li>'});
		}
		
		panels._loaded_image_index = 0;
		
		$('mast-images').down('.third').onload = panels._load_next_image;
		$('mast-images').down('.third').src = panels.data[0].image.replace(/\s/g, '%20');
		
		panels._auto_index = 0;
		panels._auto = window.setInterval(panels.autoToggle, panels._auto_delay * 1000);
	},
	
	autoToggle: function() {
		panels._toggle($('slider').childElements()[panels._auto_index].down('h2'), panels._auto_index);
		panels._auto_index = (panels._auto_index + 1) % panels.data.length;
	},
	
	toggle: function(s, index) {
		// wrapper for _toggle
		window.clearInterval(panels._auto);
		panels._toggle(s, index);
	},
		
	_toggle: function(s, index) {
		s = $(s);
		if (!panels._moving) {
			if (!s.up('li').hasClassName('open')) {
				panels._moving = true;
				// warning - there will be a very brief (miliseconds) period of time where _moving is false and we are actually moving (finishing the open)
				if ($('slider').down('.open')) {
					panels._close($('slider').down('.open'));
				}
				panels._open(s.up('li'), index);
			}
		}
	},

	_close: function(s) {
		s.removeClassName('open');
		s.down('div').visualEffect('blind_up',{duration:panels._duration, afterFinish:function() { panels._moving = false; }});	
	},
	
	_open: function(s, index) {
		s.addClassName('open');
		
		$('mast-images').down('.second').setAttribute('src', panels.data[index].image);
		$('mast-images').down('.first').visualEffect('fade',{
			duration: panels._duration,
			afterFinish: function() { 
				$('mast-images').down('.first').setAttribute('src', panels.data[index].image)
				$('mast-images').down('.first').show();
			}
		});
		
		s.down('div').visualEffect('blind_down',{ duration:panels._duration, afterFinish:function() { panels._moving = false; }});
	},
	
	_load_next_image: function() {
		panels._loaded_image_index = (panels._loaded_image_index + 1) % panels.data.length;
		if (panels._loaded_image_index == 0) return;
		
		$('mast-images').down('.third').src = panels.data[panels._loaded_image_index].image.replace(/\s/g, '%20');
	}
};

function openShawLink() {
	var over_height = $$('body')[0].offsetHeight + 50;
	var over_width = $$('body')[0].offsetWidth;
	var offset_left = ((over_width - 1104) / 2);
	$$('body')[0].insert({top: '<div id="overlay" class="overlay" style="height:' + over_height + 'px; width:'+ over_width + 'px;" onclick="closeShaw();"></div>'});
	$$('body')[0].insert({top: '<iframe id="shawFrame" width="1100" height="650" style="background:#444;position:absolute; top:100px; left:'+offset_left+'px; border:2px solid #000; z-index:100;" src="http://mygreatfloors.com/HGTV/hgtvhome" />'});
	new Effect.ScrollTo('overlay', {duration:.25 });
}

function closeShaw() {
	$('overlay').remove();
	$('shawFrame').remove();
}