var g_oImgCard = null;
 var g_oLoadImg = new Image();
 g_oLoadImg.src = '/images/loading.gif';
 g_oLoadImg.className = 'preload';
 
 function loadImg(){
 	var aSplitDocument = document.URL.split('#');
	var iImgId = g_iFirstImg;
	if (aSplitDocument[1]) {
		iImgId = parseInt(aSplitDocument[1]);
		if(isNaN(iImgId)){
			iImgId = g_iFirstImg;
		}
	}
	g_oImgCard = new Card();
	g_oImgCard.iId = iImgId;
	g_oImgCard.load();
 }
 
 function changeImg(p_iImageId){
 	location.href = '#' + p_iImageId;
	q_oImgCard = new Card();
	q_oImgCard.iId = p_iImageId;
	q_oImgCard.load();
 }
 
 function Card(){
 	this.iId = this.iId || -1;
 	this.oCardDefault = document.getElementById('cardDefault') || new Image();
	this.oCardInside = document.getElementById('cardInside') || new Image();
	this.oCardOutside = document.getElementById('cardOutside') || new Image();
	this.oCardToCart = document.getElementById('cardToCart') || document.createElement('a');
	this.oCardText = document.getElementById('cardToBigText') || document.createElement('span');
	
	this.oBody = document.getElementsByTagName('body').item(0);
	this.oMainDiv = document.getElementById('maintop');
	this.oBlockDiv = null;
	this.oImgDiv = null;
	this.oWizzard = null;
	
	this.oTheCard = null;
	
	this.oAjax = new Ajax();
	this.oAjax.set('sUrl', document.URL);
	this.oAjax.set('sMethod', 'POST');
	this.oAjax.set('oReturnObject', this);
	this.oAjax.set('sSendCode', g_sSendCode);
 }
 
 Card.prototype.load = function(){
 	if(this.iId > 0){
		var oThis = this;
		
		this.oAjax.set('sQuery','{"iCardId":'+ this.iId +',"sAction":"get"}');
		this.oAjax.set('sReturnDataTo', 'loadCardData');
		this.oAjax.doSend();
		
		this.oCardDefault.src = '/cards/normal/' + this.iId + '_default.jpg';
		this.oCardInside.src = '/cards/thumbs/' + this.iId + '_inside.jpg';
		this.oCardOutside.src = '/cards/thumbs/' + this.iId + '_outside.jpg';
		
		this.oCardDefault.setAttribute('id', 'cardDefault');
		this.oCardInside.setAttribute('id', 'cardInside');
		this.oCardOutside.setAttribute('id', 'cardOutside');
		
		this.oCardToCart.setAttribute('id', 'cardToCart');
		this.oCardToCart.innerHTML = 'Bestellen >>';
		
		this.oCardToCart.onclick = function(){
			oThis.wizard();
		}
		
		
		this.oCardInside.onclick = function(){
			oThis.showBig('inside');
		}
		
		this.oCardOutside.onclick = function(){
			oThis.showBig('outside');
		}
		
		this.oCardText.innerHTML = 'Klik voor vergroting';
		this.oCardText.setAttribute('id', 'cardToBigText');
		
		this.oMainDiv.appendChild(this.oCardDefault);
		this.oMainDiv.appendChild(this.oCardInside);
		this.oMainDiv.appendChild(this.oCardOutside);
		this.oMainDiv.appendChild(this.oCardText)
	}
 }
 
 Card.prototype.showBig = function(p_sType){
	var oThis = this;
	var oImg = new Image();
	var iEndXLocation = (document.body.clientWidth - 200) / 2;
	var iEndYLocation = (document.body.offsetHeight - 100) / 2;
	var oLoadingText = document.createTextNode('Bezig met laden...');
	
	oImg.src = '/cards/big/' + this.iId + '_' + p_sType + '.jpg';
	oImg.onclick = function(){
		oThis.close();
	}	
	
	preload = function(){
		if(oImg.complete){
			try{
				oThis.oImgDiv.removeChild(g_oLoadImg);
				oThis.oImgDiv.removeChild(oLoadingText);
				oThis.oImgDiv.style.background = '';		
				show();
			}catch(e){}
		}else{
			setTimeout('preload()', 1000);
		}
	}
	
	show = function(){
		iEndXLocation = (document.body.clientWidth - oImg.width) / 2;
		iEndYLocation = (document.body.offsetHeight - oImg.height) / 2;
		oThis.oImgDiv.style.top = iEndYLocation + 'px';
		oThis.oImgDiv.style.left = iEndXLocation + 'px'
		oThis.oImgDiv.appendChild(oImg);
	}
	
	this.oImgDiv = document.createElement('div');
	this.oImgDiv.className = 'cardImgBig';
	this.oImgDiv.style.top = iEndYLocation + 'px';
	this.oImgDiv.style.left = iEndXLocation + 'px';
	this.oImgDiv.style.width = '200px';
	this.oImgDiv.style.height = '100px';
	//IE check
	if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent)){
		this.oImgDiv.style.position = 'fixed';
	}
	this.oImgDiv.style.zIndex = '1000';	
	this.oBody.appendChild(oThis.oImgDiv);	
	this.oImgDiv.appendChild(g_oLoadImg);
	this.oImgDiv.appendChild(oLoadingText);
	
	this.createBlock();
	preload();
 }
 
 Card.prototype.createBlock = function(p_bLock){
	var iFromPercent 	= 0;
	var iToPercent		= 50;
	var iTimer			= 2;

	var oContainer = globalId('container');
	var iHeight = oContainer.scrollHeight;
	var iBodyHeight = document.body.offsetHeight;
	
	if(iBodyHeight > iHeight){
		iHeight = iBodyHeight;
	}
	var oThis = this;
	
 	this.oBlockDiv = document.createElement('div');
	this.oBlockDiv.setAttribute('class', 'screenBlock');
	this.oBody.appendChild(this.oBlockDiv);	
	
	//Start Block Screen settings
	this.oBlockDiv.style.position  	= 'absolute';
	this.oBlockDiv.style.width		= '100%';
	this.oBlockDiv.style.height 	= iHeight + 'px';
	this.oBlockDiv.style.top		= '0px';
	this.oBlockDiv.style.left		= '0px';
	this.oBlockDiv.style.background = '#000000';
	this.oBlockDiv.style.zIndex		= '100';
	
	this.oBlockDiv.onclick = function(){
		if (!p_bLock) {
			oThis.close();
		}
	}
	
	//Show opacity
	ShowOpactity = function(){
		try{
			if(iFromPercent <= iToPercent) {
				oThis.oBlockDiv.style.filter = 'alpha(opacity=' + iFromPercent + ')';
				oThis.oBlockDiv.style.opacity = iFromPercent / 100;
				
				iFromPercent++;
				setTimeout('ShowOpactity()', iTimer);
			}
		}catch(e){}
	}
	ShowOpactity();
 }

 /**
  * Start wizard
  */
 Card.prototype.wizard = function(){
	this.oWizzard = new CardWizard();
	this.oWizzard.iCardId = this.iId;
	this.oWizzard.oTheCard = this.oTheCard;
	this.oWizzard.load();	
 }
 
 Card.prototype.close = function(){
	//remove block
	this.oBody.removeChild(this.oBlockDiv);
	
	//remove image
	if(this.oImgDiv){
		this.oBody.removeChild(this.oImgDiv);	
	}
	
	//remove wizard
	if(this.oWizzard){
		this.oBody.removeChild(this.oWizzard.oWizardDiv);
	}
	
	//remove objects
	this.oBlockDiv = null;
	this.oImgDiv = null;
	this.oWizzard = null;
 }

 Card.prototype.loadCardData = function(){
 	var oCardName = globalId('cardInfoName');
	var oCardNumber = globalId('cardInfoNumber');
	var oCardMaterial = globalId('cardInfoMaterial');
	var oCardSize = globalId('cardInfoSize');
	var oCardAmount = globalId('cardInfoAmount');
	var oCardPrice = globalId('cardInfoPrijs');
	
 	if(this.oAjax.sRequestedData != ''){
		try{
			this.oTheCard = eval('(' + this.oAjax.sRequestedData + ')');
			g_sSendCode = this.oTheCard.sJsSendCode;
			//load card info
			this.oMainDiv.appendChild(this.oCardToCart);
			oCardName.innerHTML = this.oTheCard.sName + ' ' + this.oTheCard.sColor;
			oCardNumber.innerHTML = this.oTheCard.sCode;
			oCardMaterial.innerHTML = this.oTheCard.sDescription;
			oCardSize.innerHTML = this.oTheCard.sSize;
			oCardAmount.innerHTML = 'v.a. ' + this.oTheCard.aPriceList[0].iAmount + ' stuks';
			var iMaxAmount = this.oTheCard.aPriceList[this.oTheCard.aPriceList.length - 1].iAmount;
			var iMaxPrice = this.oTheCard.aPriceList[this.oTheCard.aPriceList.length - 1].fPrice;
			oCardPrice.innerHTML = 'v.a. ' + number_format(iMaxPrice / iMaxAmount, 2) + ' p/s';  
		}catch(sError){
			alert(sError);
		}
	}
 }