var selectedTabName = 'page-tab-mac'
var paneHeights = {}
var firstState = true;
var animation = 'fade';//'slide';

var walletTabs = {
	'page-tab-mac': {
		'hash': 'mac',
		'title': 'Acrylic - Wallet for Mac',
		'uri': '/wallet/mac/'
	},
	'page-tab-ios': {
		'hash': 'ios',
		'title': 'Acrylic - Wallet for iOS',
		'uri': '/wallet/ios/'
	}
}

function setupPage(){
	disableSelection(document.getElementById('download-trial-button'));
	calculatePaneHeights();
	
	var pageTabs = document.getElementsByClassName('page-tab');
	
	for(var i = 0; i < pageTabs.length; i++){
		var pageTab = pageTabs[i];
		disableSelection(pageTab);
		pageTab.onmousedown = function(){
			this.clicked = true;
		};
		pageTab.onmouseup = function(){
			if(this.clicked)
				showContent(this.id);
			this.clicked = false;
		};
	}
}

function calculatePaneHeights(){
	var slides = document.getElementsByClassName('content-slide');
	
	for(var i = 0; i < slides.length; i++){
		var slide = slides[i];
		var slideHeight = slide.offsetHeight;
		var paneKey = slide.id;
		paneHeights[paneKey] = slideHeight + 'px';
	}
}

function disableSelection(element){
	element.onselectstart = function(){
		return false;
	};
}

function deselectTabs(){
	var pageTabs = document.getElementsByClassName('page-tab');
	
	for(var i = 0; i < pageTabs.length; i++){
		var pageTab = pageTabs[i];
		pageTab.className = 'page-tab';
	}
}

function showContent(contentKey){
	/*if(contentKey === selectedTabName) return;
	selectedTabName = contentKey;*/
	
	deselectTabs();
	var tabElement = document.getElementById(contentKey);
	tabElement.className = 'page-tab page-tab-selected';
	
	var tab = walletTabs[contentKey];
	if(tab === undefined){
		console.log('Couldn\'t find the specified page');
		return;
	}
	
	document.title = tab.title;

	if(supports_history_api()){
		if(firstState)
			history.replaceState({'mode': tab.hash}, tab.title, tab.uri);
		else
			history.pushState({'mode': tab.hash}, tab.title, tab.uri);
	}else{
		window.location.hash = '#!/' + tab.hash;
	}

	var pageInner = document.getElementById('page-inner');
	var pageSpacer = document.getElementById('page-spacer');
	
	var contentID = 'content-' + tab.hash;
	pageInner.style.height = paneHeights[contentID];
	pageSpacer.style.height = paneHeights[contentID];
	
	var contentElement = document.getElementById(contentID);
	contentElement.style.pointerEvents = 'auto';
	
	if(animation === 'slide'){
		var offset = (tab.hash === 'ios') ? '-1000px' : '1000px';
		var slideElements = document.getElementsByClassName('content-slide');
		for(var i = 0; i < slideElements.length; i++){
			var slideElement = slideElements[i];
			var show = (slideElement.id === contentID);
		
			slideElement.style.webkitTransform = 'translate(' + (show ? '0px' : offset) + ', 0px)';
			slideElement.style.opacity = show ? 1 : 0;
		}
	}else if(animation === 'fade'){
		var slideElements = document.getElementsByClassName('content-slide');
		for(var i = 0; i < slideElements.length; i++){
			var slideElement = slideElements[i];
			var show = (slideElement.id === contentID);
			
			slideElement.style.webkitTransform = 'translate(0px, 0px)';
			slideElement.style.opacity = show ? 1 : 0;
			
			if(!show) slideElement.style.pointerEvents = 'none';
		}
	}
	
	var downloadDiv = document.getElementById("download-trial");
	downloadDiv.style.display = (tab.hash === 'ios') ? 'none' : 'block';

	firstState = false;
}

function displayNone(element, timeout){
    window.setTimeout(function(){
        element.style.opacity = 0;
        element.style.display = 'none';
    }, timeout * 1000);
}

window.onload = function(event) {
	setupPage();
	
    var hashString = window.location.hash;
    var showMacPage = true;
    
	for(var tabName in walletTabs){
		var tab = walletTabs[tabName];
		if(hashString === '#!/' + tab.hash){
			selectedTabName = tabName;
			break;
		}
	}
	
	showContent(selectedTabName);
}

window.onpopstate = function(event) {
	firstState = false;
    var mode = event.state['mode'];
    if(mode !== null) showContent('page-tab-' + mode);
};

function supports_history_api(){
	return !!(window.history && history.pushState);
}