// JavaScript Document
var images = new Array({url:'images/granite-kitchen-sink.jpg', name:'', details:''});
var bgIndex = 0;
var bgImage1 = 'image1';
var bgImage2 = 'image2';
var currentBg = null;
var tmpTween = null;
var bgTween = null;
var detailsTween = null;
var detailsBgTween = null;
var transitionTime = 3000;
var swapTimer = 10000;
var interval = null;
var helpCenter = false;
var currentToggle = null;
var togglerTween = null;
var accordionIndex = 0;
var defaultToggler = "cat_5";
var defaultElement = "ele_5";

window.addEvent('load', function() {
//	positionLogo();
	try{
	$(bgImage1).src = '';
	$(bgImage2).src = '';
	$(bgImage1).setStyle('opacity', 0);
	$(bgImage2).setStyle('opacity', 0);
	}catch(e){}
	
	if(helpCenter == true){
		positionCustomerCenter();
		initializeScroller();
	}
	
	positionImageNavigation();
	if($('accordion'))initializeAccordion();
	positionImages();
	configureImageNav();
	postionImageDetailContainers();
	interval = setInterval('loadNextImage()', swapTimer);
	loadImage(bgIndex);
//	setTimeout("soundManager.play('bg', 1000);soundManager.setVolume('bg', 10);", 5000);
	$('site').setStyle('visibility', 'visible');
	
});
window.addEvent('resize', function() {
	if(helpCenter == true)
		positionCustomerCenter();
		
	positionImageNavigation();
	positionImages();
	postionImageDetailContainers();
});

function positionCustomerCenter(){
	var mW = $('menu_container').getCoordinates().width;
	var cW = $('content_scroller_container').getCoordinates().width;
	var cH = $('content_scroller_container').getCoordinates().width;
	var xPos = ($('image_container').getCoordinates().left + ((mW - cW)/2)) + 'px';
	var yPos = (($('sliderDiv').getCoordinates().height - cH) / 2) + 'px';
	
	$('content_scroller_container').setStyle('left', xPos);	
	$('content_scroller_container_bg').setStyle('left', xPos);
	$('content_scroller_container').setStyle('top', yPos);	
	$('content_scroller_container_bg').setStyle('top', yPos);
	$('content_scroller_container_bg').setStyle('opacity', 0.80);
	$('content_scroller_container_bg').setStyle('width', $('content_scroller_container').getStyle('width'));
	$('content_scroller_container_bg').setStyle('height', $('content_scroller_container').getStyle('height'));
	$('sliderDiv').setStyle('left', $('right_strip').getCoordinates().left + 'px');
}

function initializeScroller(){
	var el = $('sliderDiv');
	var con = $('content');
	var sliderSteps = con.getCoordinates().height - $('contentScroller').getCoordinates().height + 20;
	
	// If we dont need to scroll return
	if(sliderSteps < 0){
		el.setStyle('display', 'none');
		return;
	}else el.setStyle('opacity', 0);
	
	// Create the new slider instance
	new Slider(el, el.getElement('.knob'), {
		mode:  'vertical',
		steps: sliderSteps,
		onChange: function(value){
			$('content').setStyle('top', -parseInt(value));
		}
	}).set();
	
	el.fade(1);
}

function postionImageDetailContainers(){
	var xPos = $('image_container').getCoordinates().left + 'px';
	$('image_details').setStyle('left', xPos);
	$('image_details_bg').setStyle('left', xPos);
	$('image_details').setStyle('top', 10);
	$('image_details_bg').setStyle('top', 10);
}
function setImageDetails(index){
	try{
		detailsBgTween.cancel();
		detailsTween.cancel();
	}catch(e){}
	
	$('image_details_bg').setStyle('opacity', 0);
	$('image_details').setStyle('opacity', 0);
	
	if(images[index].name == "" || images[index].details == ""){
		$('image_details').innerHTML = '';
		return;	
	}
	
	$('image_details').innerHTML = images[index].details;//'<span class="content_title">' + images[index].name + '</span><br>' + ;
	$('image_details_bg').setStyle('width', $('image_details').getCoordinates().width);
	$('image_details_bg').setStyle('height', $('image_details').getCoordinates().height);
	
	detailsBgTween = $('image_details_bg').get('tween', {property: 'opacity', duration: transitionTime});
	detailsBgTween.start(0.7);
	
	detailsBgTween.complete = function(){
		detailsBgTween.cancel();
		$('image_details').setStyle('opacity', 0);
		detailsTween = $('image_details').get('tween', {property: 'opacity', duration: 500});
		detailsTween.start(1);
	};
}
function loadNextImage(){
	if (images.length == 1)return;
	if (bgIndex == images.length - 1)bgIndex = 0;
	else bgIndex++;
	
	loadImage(bgIndex);
}

function loadPreviousImage(){
	if (images.length == 1) return;
	if(bgIndex == 0)bgIndex = images.length - 1;
	else bgIndex--;
	
	loadImage(bgIndex);
}
function configureImageNav(){
	$('prevImg').addEvent('click', function(){clearInterval(interval);
											  loadPreviousImage()
											 });
	$('nextImg').addEvent('click', function(){clearInterval(interval);
											  loadNextImage();
											 });
}
function updateImageCount(index){
	$('imgCount').innerHTML = (index + 1) + " of " + images.length;
}
function loadImage(index){
	if(images.length == 1){
		$('image_nav_container').setStyle('display', 'none');	
		$('image_nav_bg').setStyle('display', 'none');
	}else{
		$('image_nav_container').setStyle('display', 'block');	
		$('image_nav_bg').setStyle('display', 'block');
	}
	updateImageCount(index);
//	if(!helpCenter)setImageDetails(index);
	try{
		tmpTween.cancel();
	}catch(e){}
	try{
		bgTween.cancel();
	}catch(e){}
	
	if(currentBg != null){
		tempBg = currentBg;
	}
	if(currentBg == $(bgImage2)){
		currentBg = $(bgImage1);
	}else {
		currentBg = $(bgImage2);		
	}
	currentBg.src = images[index].url;
	currentBg.onload = onBackgroundLoaded;
	$(currentBg.id).setStyle('opacity', '0');
}
function onBackgroundLoaded(){	
	var tempBg = null;
	var _current = $(currentBg.id);
	if (currentBg == $(bgImage1))
		tempBg = $(bgImage2);
	else 
		tempBg = $(bgImage1);
	
	var xPos = $('image_container').getCoordinates().left;
	
	if(_current.getCoordinates().width < $('image_container').getCoordinates().width)
		_current.setStyle('left', (($('image_container').getCoordinates().width - _current.getCoordinates().width)/2) + xPos);
	else _current.setStyle('left', xPos);
	
	if(_current.getCoordinates().height < $('image_container').getCoordinates().height)
		_current.setStyle('top', (($('image_container').getCoordinates().height - _current.getCoordinates().height)/2));
	else _current.setStyle('top', 0);
		
	tmpTween = _current.get('tween', {property: 'opacity', duration: transitionTime});
	tmpTween.complete = onImageSwapped;
	tmpTween.start(1);
	
	bgTween = $(tempBg.id).get('tween', {property: 'opacity', duration: transitionTime});
	bgTween.start(0);
}
function onImageSwapped()
{
	tmpTween.cancel();
}

function positionLogo(){
	var xPos = $('image_container').getCoordinates().left;
	$('logo_container').setStyle('top', "10px");
	$('logo_bg').setStyle('top', "10px");
	$('logo_container').setStyle('left', xPos + "px");
	$('logo_bg').setStyle('left', xPos + "px");
	$('logo_bg').fade(0.7);
}

function positionImages(){
	var xPos = $('image_container').getCoordinates().left;
	$('image1').setStyle('left', xPos);
	$('image2').setStyle('left', xPos);
	
	if(currentBg != null){
		var _current = $(currentBg.id);
		if(_current.getCoordinates().width < $('image_container').getCoordinates().width)
			_current.setStyle('left', (($('image_container').getCoordinates().width - _current.getCoordinates().width)/2) + xPos);
		else _current.setStyle('left', xPos);
		
		if(_current.getCoordinates().height < $('image_container').getCoordinates().height)
			_current.setStyle('top', (($('image_container').getCoordinates().height - _current.getCoordinates().height)/2));
		else _current.setStyle('top', 0);
	}
}
function positionImageNavigation(){
	var xPos = ($('menu_container').getCoordinates().left) + "px";
	var yPos = ($('menu_container').getCoordinates().top - 30) + "px";
	
	$('image_nav_container').setStyle('top', yPos);
	$('image_nav_container').setStyle('left', xPos);
	$('image_nav_bg').setStyle('top', yPos);
	$('image_nav_bg').setStyle('left', xPos);
	$('image_nav_bg').setStyle('opacity', 0.5);
	$('image_nav_container').tween('width', 250);
	$('image_nav_bg').tween('width', 250);
}

function initializeAccordion(){
	
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		display: accordionIndex,
		onActive: function(toggler, element){
			getProducts(toggler, element);
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#ffffff');
		}
	});
//	getProducts($(defaultToggler), $(defaultElement));
}

function getProducts(toggler, element){
	toggler.setStyle('color', '#ffffff');
	id = toggler.id.slice(toggler.id.indexOf('_') + 1);
	
	if(currentToggle != null){
		currentToggle.className = "toggler";
	}
	currentToggle = toggler;
	
	if(togglerTween != null)togglerTween.cancel();
	
	toggler.className = "toggler2";
	
	var jsonRequest = new Request.JSON({url: "index.php?/products/get_products/"+id, onComplete: function(obj){
			if(obj.length){
				images = obj;
				bgIndex = 0;
				loadImage(bgIndex);
				clearInterval(interval);
				interval = setInterval('loadNextImage()', swapTimer);
			}
	}}).get();
}