var slideShowConfig = {
	banners:		null,
	bannerIndex:	0,
	animInterval:	5000,
	animSpeed:		1500
}

var boxOptions = {
	transition:		'elastic',
	speed:			550,
	width:			'556px',
	height:			false,
	initialWidth:	'556px',
	initialHeight:	'300px',
	opacity:		0.45,
	scrollbars:		false,
	close:			''
}; 


pDomApi.addDomLoadEvent(function() {
	prepareColorBox();
	prepareBanner();
	prepareFilterSelect();
	prepareLocationOrderPage();
	prepareOrderButtonOver();
	preparePhotoUploads();
	prepareCartPhotoIcons();
	prepareNamePie();
	preparePhotoChoose();
	// Not very neat, i know. But the datepicker object uses jQuery to load.
	// This function depends on the datepicker to be loaded, but i have no control
	// Over te order in which this is executed.
	window.setTimeout(prepareShopSelector, 200);
});


function prepareCartPhotoIcons() {
	
	
	$('a.cartPhotoPreview').mouseover(function() {
		$('img', this).show();
	});
	
	$('a.cartPhotoPreview').mouseout(function() {
		$('img', this).hide();
	});
	
}

function prepareNamePie(){
	$('div.useTextPie').click(function(){
		
		// Validate the length of the text, and submit form
		var text = document.getElementById('namePieText');
		var form = document.getElementById('namePieForm');
		var error = document.getElementById('namePieErrors');
		
		var textlen = text.value.length
		if(textlen > 45){
			error.innerHTML = 'Uw invoer is te lang. U kunt maximaal 45 tekens opgeven.';
		} else if(textlen == 0){
			error.innerHTML = 'Uw invoer is leeg.';
		} else {
			form.submit();
		}
	});
}

function preparePhotoUploads() {
	
	$('a.showPreview').click(function() {
		
		var imageType	= this.id.substring(0,1);
		var imageId		= this.id.substring(1);
		
		// Set new preview image
		if (imageType == 'u') {
			var url = '/shop/gafbeelding/uploadNormal/' + imageId + '/afbeelding.jpg';
		} else {
			var url = '/file_handler/photos/uploadNormal/view/' + imageId + '/image.jpg'; 
		}
		$('img#previewImage').attr('src', url);
		$('img#previewImage').attr('width', imageSizes[this.id]['width']);
		$('img#previewImage').attr('height', imageSizes[this.id]['height']);
		
		// Remove all selected images classes
		var selected = $('div.photoPicker img.selected'); 
		$(selected).each(function(i) {
			$(selected[i]).removeClass('selected');
		});
		
		// Set thumbnail as selected
		var selected = $('img.photoPick', this);
		$(selected).each(function(i) {
			$(selected[i]).addClass('selected');
		});
		
		// Update the use photo link
		var input = document.getElementById('photoPieId');
		input.value = this.id;

		// Resize colorbox to new content dimensions
		$.fn.colorbox.resize();
		
		
		return false;
	});
}

function preparePhotoChoose() {
	
	$('a.usePhotoPie').click(function() {
		var form = document.getElementById('photoPieAdd');
		form.submit();
	});
}

function prepareOrderButtonOver() {
	
	$('.fakeOrderButton').mouseout(function() {
		elems = $('.togglable', this);
		$(elems).each(function(i) {
			$(elems[i]).hide();
		});
	});
	
	
	$('.fakeOrderButton').mouseover(function() {
		var kids = $(this).find('.togglable');
		kids.each(function(i) {
			$(kids[i]).show();
		});		
	});
}


function prepareLocationOrderPage() {
	var selectElem = $('#delivery_method');
	if (selectElem) {
		changeLocation();
		selectElem.change(changeLocation);
	}
}

function prepareShopSelector() {

	if (document.getElementById('shopSelector')) {
		$('#shopSelector').change(getLocationOpeningHours);

		var dateElem = pDomApi.getElementsByClassName("hasDatepicker", "input")[0];
		pDomApi.addEvent(dateElem, 'change', getLocationOpeningHours);
		$.datepicker.setDefaults({onClose: getLocationOpeningHours});

		getLocationOpeningHours();
	}
}

function getLocationOpeningHours() {
	var shopSelect	= document.getElementById('shopSelector');
	if (shopSelect) {
		var locationId	= $("#shopSelector option:selected").length
			?shopSelect.options[shopSelect.selectedIndex].value : 0;
		var selDate		= pDomApi.getElementsByClassName("hasDatepicker", "input");
		var selDateElem = selDate[0].value;
		var url	= openingHourUrl.replace('/0/', '/' + locationId + '/')
			.replace('00-00-0000', selDateElem);
		
		$.ajax({
			type: "GET",
			url: url,
			dataType: "json",
			success: showOpeningHours,
			cache: false
		});
	};

}

function showOpeningHours(options) {

	var selectElem		= document.getElementById('pickupTimeSelector');
	var selectedValue	= selectElem.options[selectElem.selectedIndex].value;
	setSelectBoxOptions(selectElem, options.hours, selectedValue, 'value');
	
	var selectElem		= document.getElementById('shopSelector');
	var selectedValue	= $("#shopSelector option:selected").length
		? selectElem.options[selectElem.selectedIndex].value : 0;
	setSelectBoxOptions(selectElem, options.locations, selectedValue, 'key');

}

function setSelectBoxOptions(selectElem, options, selectedValue, matchType) {
	// Remove all childNodes
	while (selectElem.childNodes.length > 0) {
		selectElem.removeChild(selectElem.firstChild);
	}

	for (option in options) {

		var optionElem = document.createElement('option');
		var textElem = document.createTextNode(options[option]);
		optionElem.setAttribute('value', option);

		if (selectedValue == option) {
			optionElem.setAttribute('selected', 'selected');
		}

		optionElem.appendChild(textElem);
		selectElem.appendChild(optionElem);
	}	
}

function changeLocation(e) {
	var selectElem	= document.getElementById('delivery_method');
	
	if (! selectElem) {
		return;
	}
	
	var method		= selectElem.options[selectElem.selectedIndex].value;
	var speed		= 0;
	
	if (method == '0') {
		$('#method_pickup').hide(speed);
		$('#method_delivery').hide(speed);
	} else if (method == 'pickup') {
		$('#method_pickup').show(speed);
		$('#method_delivery').hide(speed);
	} else if (method == 'delivery') {
		$('#method_pickup').hide(speed);
		$('#method_delivery').show(speed);
	}	
}

function prepareFilterSelect() {
	
	$('#filterSelect').change(function(e) {
		document.forms['searchSortForm'].submit();
	});
	
}

function prepareBanner() {
	
	var banner = document.getElementById('shopBanner');
	
	if (banner) {
		banners		= pDomApi.getElementsByClassName('banner', 'div', banner);
		bannerIndex	= slideShowConfig['bannerIndex'];
		
		slideShowConfig['banners'] = banners;
		
		banners[bannerIndex].style.display = 'block';
		if (banners.length > 1) {
			setInterval(switchBanner, slideShowConfig['animInterval']);
		}
	}
}

function switchBanner() {
	banners		= slideShowConfig['banners'];
	bannerIndex = slideShowConfig['bannerIndex'];
	
	var curBanner	= banners[bannerIndex];
	
	if (! banners[bannerIndex + 1]) {
		bannerIndex = 0;
	} else {
		bannerIndex++;
	}
	
	var nextBanner	= banners[bannerIndex];
	slideShowConfig['bannerIndex'] = bannerIndex;
	
	$(nextBanner).fadeIn(2000);	
	$(curBanner).fadeOut(2000);
}

function manualColorBox(url) {
	var url = url;
	$('document').ready(function() {
		boxOptions.href	= url;
		boxOptions.open	= true;	
		
		$.fn.colorbox(boxOptions);
	})
}

function prepareColorBox() {
	var boxOptions = {
			transition:		'elastic',
			speed:			550,
			width:			'556px',
			height:			false,
			initialWidth:	'556px',
			initialHeight:	'300px',
			opacity:		0.45,
			scrollbars:		false,
			close:			''
	};
	
	var cb = $(".productPopup").colorbox(boxOptions);
	
	$().bind('cbox_complete', function(){
		$('.closeButton').bind('click', function(e) {
			e.preventDefault();
			$.fn.colorbox.close();
		});
		
		var elems = $('a.colorboxStay');

		$('a.colorboxStay').each(function(i) {
			$(elems[i]).colorbox(boxOptions);
		});
		
		preparePhotoUploads();
		prepareNamePie();
		preparePhotoChoose();
	});	
}




function updateCart(prodId, amount, type) {
	
	var formElem			= document.forms['cartUpdate'];
	var hiddenElemAmount	= formElem.elements['amount'];
	var hiddenElemType		= formElem.elements['type'];
	
	hiddenElemAmount.name 	+= '[' + prodId + ']';
	hiddenElemAmount.value	= amount;
	hiddenElemType.value	= type; 

	formElem.submit();
	
    return false;
}

function copyAddress(frm) {
	var elems = new Array('adres','huisnummer','postcode','plaats','land');
	while (elem = elems.pop()) {
		frm.elements['shop[' + elem + '2]'].value = frm.elements['shop[' + elem + ']'].value;
	}
}


function getObj(name) {
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
		this.obj = document.all[name];
		this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}

function showHide(id) {
	element = new getObj(id);
	if (! element.style) { return; }
	if (element.style.display == 'table-row' || element.style.display == 'block') {
		element.style.display = 'none';
	} else {
		try {
			element.style.display = 'table-row';
		}
		catch (e) {
			element.style.display = 'block';
		}
	}
}


//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth  = 600;
defaultHeight = 400;

//kinda important
var AutoClose = true;

//don't touch
function popImage(imageURL,imageTitle){
  var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
  if( !imgWin ) { return true; } //popup blockers should not cause errors
  imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
    'function resizeWinTo() {\n'+
    'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
    'var oH = document.images[0].height, oW = document.images[0].width;\n'+
    'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
    'window.doneAlready = true;\n'+ //for Safari and Opera
    'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
    'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
    'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
    'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
    'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
    'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
    'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
    'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
    'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
    'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
    '}\n'+
    '<\/script>'+
    '<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
    (document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
    '<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
    (document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
  imgWin.document.close();
  if( imgWin.focus ) { imgWin.focus(); }
  return false;
}