var tempCurrSlide;
var currentSlide = -1;
var aIntervals = new Array();
var aPanels = new Array();
var aSlideTargets = new Array();
var oHolder = document.getElementById('holder');
var currDirection;
var bSliding = false;

	getWinSize();
	
function INITsite(){	
	
	getWinSize();
	
	var oContactPanel = new contactPanel();
		oContactPanel.buildPanel();			
		aPanels.push(oContactPanel);	
		
	for(i=0;i<aLogos.length; i++){
		var ofloatingPanel = new floatingPanel(i);
			ofloatingPanel.brandLogo = aLogos[i];
			ofloatingPanel.sDescription = aDescs[i];
			ofloatingPanel.aImages = aImages[i];
			ofloatingPanel.aBulletPoints = aBullets[i];
			ofloatingPanel.buildPanel();
			ofloatingPanel.buildImages();			
			aPanels.push(ofloatingPanel);
	}
	
	var oHolder = document.getElementById('holder');
	
	var leftArrow = document.createElement('img');
		leftArrow.setAttribute('src', 'image/template/left.gif');
		leftArrow.setAttribute('id', 'leftArrow');
		leftArrow.className = 'leftArrow';
		leftArrow.style.left = winW*0.05 + 'px';
		leftArrow.onclick = function(){
			nextLast('up');
		}

	var rightArrow = document.createElement('img');
		rightArrow.setAttribute('src', 'image/template/right.gif');
		rightArrow.className = 'rightArrow';
		rightArrow.setAttribute('id', 'rightArrow');
		rightArrow.style.left = winW*0.9 + 'px';
		rightArrow.onclick = function(){
			nextLast('dn');
		}
		
		oHolder.appendChild(rightArrow);
		oHolder.appendChild(leftArrow);
	
}

function resetSite(){
	var oHolder = document.getElementById('holder');
		oHolder.innerHTML = "";	
		currentSlide = -1;
		aIntervals = [];
		aPanels = [];
		aSlideTargets = [];
		aIntervals = [];
	
	var oHolder = document.getElementById('holder');
		oHolder.style.height = 0 + 'px';
		oHolder.style.width = 0 + 'px';	
	
		INITsite();
		
}

function nextLast(direction){
	switch(direction){
		case 'up':
			if(currentSlide - 1 < 0){
				choosePanelSlide(aPanels.length - 1, 'l');
			}else{
				choosePanelSlide(currentSlide - 1, 'l');
			}
		break
		case 'dn':	
			if(currentSlide + 1 > aPanels.length - 1){
				choosePanelSlide(0, 'r');
			}else{
				choosePanelSlide(currentSlide + 1, 'r');
			}	
		break		
	}	
}

function choosePanelSlide(panel, direction){
	
	var oHolder = document.getElementById('holder');
		oHolder.style.height = 600 + 'px';
		oHolder.style.width = 100 + '%';	
	
	if(!bSliding){
		bSliding = true;
		currDirection = direction;
		if(currentSlide != panel && currentSlide != -1){
			if(direction == 'l'){
				positionallPanels('l');
				aPanels[currentSlide].destX = winW + 100;
			}else if(direction == 'r'){
				positionallPanels('r');
				aPanels[currentSlide].destX = 0 - (100 + aPanels[currentSlide].nWidth);
			}
			aSlideTargets.push(aPanels[currentSlide]);
			
		}
		aPanels[panel].destX = (winW/2) - (aPanels[panel].nWidth/2);
		aSlideTargets.push(aPanels[panel]);
		
		Interval = setInterval(slide, 10);
		aIntervals.push(Interval);
		tempCurrSlide = panel;
	}
}

function positionallPanels(position){
	switch(position){
		case 'l':	
			for(f=0; f<aPanels.length; f++){
				if(f!=currentSlide){
					aPanels[f].outerDiv.style.left = (0 - (100 + aPanels[f].nWidth)) + 'px';
				}else if(currentSlide != -1){
					aPanels[f].outerDiv.style.left = ((winW/2) - (aPanels[f].nWidth/2)) + 'px';
				}
			}
		break
		case 'r':	
			for(f=0; f<aPanels.length; f++){
				if(f!=currentSlide){
					aPanels[f].outerDiv.style.left = (winW + 100) + 'px';
				}else if(currentSlide != -1){
					aPanels[f].outerDiv.style.left = ((winW/2) - (aPanels[f].nWidth/2)) + 'px';
				}
			}
		break
	}
}

function slide(){
	for(n=0; n<aSlideTargets.length; n++){
		var change = ((aSlideTargets[n].destX - parseInt(aSlideTargets[n].outerDiv.style.left))*0.1);
		var newShift = parseInt(aSlideTargets[n].outerDiv.style.left) + change;
			aSlideTargets[n].outerDiv.style.left = newShift + 'px';
			if(change < 1 && change > -1){
				aSlideTargets = [];
				currentSlide = tempCurrSlide;
				clearIntervals();
				bSliding = false;
			}		
	}
}

function floatingPanel(v){
	this.tempCurrSlide;
	this.currentSlide = 0;
	this.aIntervals = new Array();
	this.aPanels = new Array();
	this.aSlideTargets = new Array();
	this.currDirection;

	this.oParent = document.getElementById('holder');
	this.slideable = true;
	this.outerDiv;
	this.destX;
	this.Position = v;
	this.sDescription;
	this.brandLogo;
	this.aBulletPoints = new Array();
	this.aImages = new Array();
	this.aRenderedImages = new Array();
	this.nWidth = 600;
	this.nHeight = 400;
	this.nTop = 10;
	this.nLeft = winW;
};
floatingPanel.prototype.buildPanel = function(){

	var oPanel = document.createElement('div');
		oPanel.setAttribute('id', 'floatingPanel' + this.v);
		oPanel.className = 'floatingPanel ' + this.brandLogo;
		oPanel.style.width = this.nWidth + 'px';
		oPanel.style.height = this.nHeight + 'px';
		oPanel.style.top = this.nTop + 'px';
		oPanel.style.left = this.nLeft + 'px';
	
	this.outerDiv = oPanel;
	
	var oHeader = document.createElement('div');
		oHeader.className = 'header';
	
	var imgTL = document.createElement('img');
		imgTL.setAttribute('src','image/acts/' + this.brandLogo + '/tl.gif');
	
	var oHDiv = document.createElement('div');
		oHDiv.innerHTML = '&nbsp;';
												  
	var imgTR = document.createElement('img');
		imgTR.setAttribute('src','image/acts/' + this.brandLogo + '/tr.gif');
	
	var oContent = document.createElement('div');
		oContent.className = 'content';
	
	var oControls = document.createElement('div');
		oControls.className = 'controls';
						
	var oHomeLink = document.createElement('a');
		oHomeLink.setAttribute('href','#');
		
		oHomeLink.onclick = function(){
			resetSite();
		}
		
	var oHomeImg = document.createElement('img');
		oHomeImg.setAttribute('src', 'image/acts/' + this.brandLogo + '/home.gif');
		
	var oContactLink = document.createElement('a');
		oContactLink.setAttribute('href','#');

		oContactLink.onclick = function(){
			choosePanelSlide(0, 'l');
		}
						
	var oContactImg = document.createElement('img');
		oContactImg.setAttribute('src', 'image/acts/' + this.brandLogo + '/contact.gif');
				
	var oBrandImg = document.createElement('img');
		oBrandImg.setAttribute('src', 'image/acts/' + this.brandLogo + '/logo.gif');	
		oBrandImg.className = 'logo';
		
	var oBrandDesc = document.createElement('p');		
		
	var oBrandList = document.createElement('ul');	
		for(b=0; b<this.aBulletPoints.length; b++){
			var oBrandListItem = document.createElement('li');
				oBrandListItem.appendChild(document.createTextNode(this.aBulletPoints[b]));
				oBrandList.appendChild(oBrandListItem);
		}
		
	var oImageContent = document.createElement('div');
		oImageContent.className = 'ImageContent';

	var oArrowLeft = document.createElement('img');
		oArrowLeft.className = 'arrow';
		oArrowLeft.setAttribute('src','image/acts/' + this.brandLogo + '/left.gif');
		oArrowLeft.onclick = this.nextLast.bind(this, 'up');

	var oArrowRight = document.createElement('img');
		oArrowRight.className = 'arrow';
		oArrowRight.setAttribute('src','image/acts/' + this.brandLogo + '/right.gif');
		oArrowRight.onclick = this.nextLast.bind(this, 'dn');

	var oImageHolder = document.createElement('div');
		oImageHolder.className = 'ImageHolder';
		this.oImageHolder = oImageHolder;
		
	var oFooter = document.createElement('div');
		oFooter.className = 'footer';
	
	var imgBL = document.createElement('img');
		imgBL.setAttribute('src','image/acts/' + this.brandLogo + '/bl.gif');
	
	var oFDiv = document.createElement('div');
	
	var imgBR = document.createElement('img');
		imgBR.setAttribute('src','image/acts/' + this.brandLogo + '/br.gif');
	
	oPanel.appendChild(oHeader);
	
	oHeader.appendChild(imgTL);
	oHeader.appendChild(oHDiv);
	oHeader.appendChild(imgTR);
	
	oPanel.appendChild(oContent);
	
	oContent.appendChild(oControls);
		
	oControls.appendChild(oHomeLink);
	oHomeLink.appendChild(oHomeImg);	
	oControls.appendChild(oContactLink);
	oContactLink.appendChild(oContactImg);
	
	oContent.appendChild(oBrandImg);
	oContent.appendChild(oBrandDesc);
	
	oBrandDesc.appendChild(document.createTextNode(this.sDescription));
	oContent.appendChild(oBrandList);
	oImageContent.appendChild(oArrowLeft);
	oImageContent.appendChild(oImageHolder);
	oImageContent.appendChild(oArrowRight);
	oContent.appendChild(oImageContent);
	oPanel.appendChild(oFooter);
	oFooter.appendChild(imgBL);
	oFooter.appendChild(oFDiv);
	oFooter.appendChild(imgBR);
	
	this.oParent.appendChild(oPanel);
}
floatingPanel.prototype.positionall = function(position){
	switch(position){
		case 'l':	
			for(f=0; f<aPanels[currentSlide].aPanels.length; f++){
				if(f!=aPanels[currentSlide].currentSlide){
					aPanels[currentSlide].aPanels[f].img.style.left = (-500 + aPanels[currentSlide].aPanels[f].offSetLeft) + 'px';
				}
			}
		break
		case 'r':	
			for(f=0; f<aPanels[currentSlide].aPanels.length; f++){
				if(f!=aPanels[currentSlide].currentSlide){
					aPanels[currentSlide].aPanels[f].img.style.left = (750 + aPanels[currentSlide].aPanels[f].offSetLeft) + 'px';
				}
			}
		break
	}
}

floatingPanel.prototype.nextLast = function(direction){
	if(!bSliding){
		bSliding = true;
		switch(direction){
			case 'up':
				if(aPanels[currentSlide].currentSlide - 1 < 0){
					aPanels[currentSlide].choosePanelSlide(aPanels[currentSlide].aPanels.length - 1, 'l');
				}else{
					aPanels[currentSlide].choosePanelSlide(aPanels[currentSlide].currentSlide - 1, 'l');
				}
			break
			case 'dn':	
				if(aPanels[currentSlide].currentSlide + 1 > aPanels[currentSlide].aPanels.length - 1){
					aPanels[currentSlide].choosePanelSlide(0, 'r');
				}else{
					aPanels[currentSlide].choosePanelSlide(aPanels[currentSlide].currentSlide + 1, 'r');
				}	
			break		
		}
	}	
}

floatingPanel.prototype.choosePanelSlide = function(panel, direction){
	aPanels[currentSlide].currDirection = direction;
	if(aPanels[currentSlide].currentSlide != panel && aPanels[currentSlide].currentSlide != -1){
		if(direction == 'r'){
			aPanels[currentSlide].positionall('r');
			aPanels[currentSlide].aPanels[aPanels[currentSlide].currentSlide].destX = -500 + aPanels[currentSlide].aPanels[panel].offSetLeft;
			aPanels[currentSlide].aPanels[panel].destX = 190 + aPanels[currentSlide].aPanels[panel].offSetLeft;
		}else if(direction == 'l'){
			aPanels[currentSlide].positionall('l');
			aPanels[currentSlide].aPanels[aPanels[currentSlide].currentSlide].destX = 1000 + aPanels[currentSlide].aPanels[panel].offSetLeft;
			aPanels[currentSlide].aPanels[panel].destX = 210 + aPanels[currentSlide].aPanels[panel].offSetLeft;
		}
		aPanels[currentSlide].aSlideTargets.push(aPanels[currentSlide].aPanels[aPanels[currentSlide].currentSlide]);
	}
	aPanels[currentSlide].aSlideTargets.push(aPanels[currentSlide].aPanels[panel]);
	imageInterval = setInterval(aPanels[currentSlide].slide, 10);
	aIntervals.push(imageInterval);
	aPanels[currentSlide].tempCurrSlide = panel;
}

floatingPanel.prototype.slide = function (){
	for(n=0; n<aPanels[currentSlide].aSlideTargets.length; n++){
		var change = ((aPanels[currentSlide].aSlideTargets[n].destX - parseInt(aPanels[currentSlide].aSlideTargets[n].img.style.left))*0.1);
		var newShift = parseInt(aPanels[currentSlide].aSlideTargets[n].img.style.left) + change;
			aPanels[currentSlide].aSlideTargets[n].img.style.left = newShift + 'px';
			if(change < 1 && change > -1){
				aPanels[currentSlide].aSlideTargets = [];
				aPanels[currentSlide].currentSlide = aPanels[currentSlide].tempCurrSlide;
				clearIntervals();
				bSliding = false;
			}		
	}
}

floatingPanel.prototype.buildImages = function(){
	for(n=0;n<this.aImages.length; n++){
		var oImg = new image();
		 	oImg.src = this.aImages[n][0];
			oImg.orientation = this.aImages[n][1];
			oImg.oTarget = this.oImageHolder;
			oImg.buildImage();
			this.aRenderedImages.push(oImg);
			this.aPanels.push(oImg);
		if(n==0){
			this.image = oImg;	
		}
	}
	this.image.img.style.left = (200 + this.image.offSetLeft) + 'px';
}

function contactPanel(){
	this.oParent = document.getElementById('holder');
	this.slideable = true;
	this.outerDiv;
	this.destX;
	this.nWidth = 600;
	this.nHeight = 400;
	this.nTop = 10;
	this.nLeft = winW;
};
contactPanel.prototype = new floatingPanel();

contactPanel.prototype.buildPanel = function(){

	var oPanel = document.createElement('div');
		oPanel.setAttribute('id', 'floatingPanelContact');
		oPanel.className = 'floatingPanel contact';
		oPanel.style.width = this.nWidth + 'px';
		oPanel.style.height = this.nHeight + 'px';
		oPanel.style.top = this.nTop + 'px';
		oPanel.style.left = this.nLeft + 'px';
	
	this.outerDiv = oPanel;
	
	var oHeader = document.createElement('div');
		oHeader.className = 'header';
	
	var imgTL = document.createElement('img');
		imgTL.setAttribute('src','image/template/tl.gif');
	
	var oHDiv = document.createElement('div');
	
	var imgTR = document.createElement('img');
		imgTR.setAttribute('src','image/template/tr.gif');
	
	var oContent = document.createElement('div');
		oContent.className = 'content';
	
	var oControls = document.createElement('div');
		oControls.className = 'controls';
						
	var oHomeLink = document.createElement('a');
		oHomeLink.setAttribute('href','#');
		
		oHomeLink.onclick = function(){
			resetSite();
		}
		
	var oHomeImg = document.createElement('img');
		oHomeImg.setAttribute('src', 'image/template/btn_home.gif');
		
	var oHeaderText = document.createElement('h1');
		oHeaderText.innerHTML = 'Contact Us';
		
	var oBrandList = document.createElement('ul');	
		oBrandList.style.padding = '70px 0px 0px 0px';
		
	var oBrandListItem = document.createElement('li');
		oBrandListItem.appendChild(document.createTextNode("Alternatively you can call on 07511 542 190 or 07511 542 191"));
		oBrandList.appendChild(oBrandListItem);
				
		
	var oFormHolder = document.createElement('div');	
		oFormHolder.className = 'formHolder';
		
		
	var oForm = document.createElement('form');	
		oForm.setAttribute('method','post');
		oForm.setAttribute('action','php/sendmail.php');
		
	var oFormList = document.createElement('dl');
		oFormList.innerHTML = '<dt>From Email:</dt><dd><input type="text" name="email"></dd><dt>Subject:</dt><dd><input type="text" name="subject"></dd><dt>Message:</dt><dd><textarea name="message" rows="10" cols="50"></textarea></dd><dt></dt><dd><INPUT type="submit" class="sendBtn" value="Send" name="submit"></dd>';

	var oFooter = document.createElement('div');
		oFooter.className = 'footer';
	
	var imgBL = document.createElement('img');
		imgBL.setAttribute('src','image/template/bl.gif');
	
	var oFDiv = document.createElement('div');
	
	var imgBR = document.createElement('img');
		imgBR.setAttribute('src','image/template/br.gif');
	
	oPanel.appendChild(oHeader);
	
	oHeader.appendChild(imgTL);
	oHeader.appendChild(oHDiv);
	oHeader.appendChild(imgTR);
	
	oPanel.appendChild(oContent);
	
	oContent.appendChild(oControls);
		
	oControls.appendChild(oHomeLink);
	oHomeLink.appendChild(oHomeImg);	
	
	oContent.appendChild(oHeaderText);
	oContent.appendChild(oFormHolder);
	
	oFormHolder.appendChild(oForm);
	oForm.appendChild(oFormList);
	oForm.appendChild(oBrandList);
	oPanel.appendChild(oFooter);
	oFooter.appendChild(imgBL);
	oFooter.appendChild(oFDiv);
	oFooter.appendChild(imgBR);
	
	this.oParent.appendChild(oPanel);
}

function image(){
	this.src;	
	this.destX;	
	this.orientation;	
	this.offSetLeft;
	this.offSetTop;
	this.oTarget;
	this.img;
	this.startTop = 205;
	this.startLeft = 750;
}
image.prototype.buildImage = function(){
	this.img = document.createElement('img');
	this.img.setAttribute('src',this.src); 
	if(this.orientation == 'P'){
		this.offSetLeft = -129;
		this.offSetTop = -194;
	}else if(this.orientation == 'L'){
		this.offSetTop = -129;
		this.offSetLeft = -194;
	}
	this.oTarget.appendChild(this.img);
	this.img.style.top = (this.startTop + this.offSetTop) + 'px';
	this.img.style.left = (this.startLeft + this.offSetLeft) + 'px';
}