var menuShow = false;
var pants_menu = '<div></div>';
var tops_menu = '<div></div>';
var menu_root = '<div class="topmenu_items"><a href="javascript:void()" onclick="reelHome()"><span class="menu_cat">home /</span></a></div>';
var x;
var hoogte = 4800;
var detail = false;
var side = 'splash';
var returnData;
var tabData;
var men_tops_menu;
var men_pants_menu;
var wommen_tops_menu;
var women_pants_menu;
var x_men;
var x_women;
var rand_no = 0;

function intro(){
	var scrolli = new Fx.Scroll('tile-wrap', {
		wait: false,
		duration: 600,
		offset: {'x': -400, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	var backfade = function(){
		var div = $('background').setStyles({
			display:'block',
			opacity: 0
		});
		var divc = $('container').setStyles({
		display:'block',
		opacity: 0
	});

	var growDiv = new Fx.Style($('background'),'opacity', {duration: 3000}).addEvent('onComplete', function() {
		overlay()
	});
	growDiv.start(1);
	};
	var overlay = function(){
		var overFade = new Fx.Style($('container'),
		'opacity', {duration: 1000}).addEvent('onComplete', function() {
			scrolli.scrollTo(3000, 4800);
			
			
			//alert ("klaar");
		});
		overFade.start(1);
		
	};
	backfade();
	
	
	function anchors(){
	$$('a[href^="#"]').addEvent('click', function(e) {
		new Event(e).stop();
		scrolli.toElement($E(this.getProperty('href')));
	});
	}
	
				
	anchors();
	
}

function getwidth(type){
	if (window.innerWidth || window.innerHeight){ 
		docwidth = window.innerWidth/2; 
		docheight = window.innerHeight; 
	} 
	//IE Mozilla 
	if (document.body.clientWidth || document.body.clientHeight){ 
		docwidth = document.body.clientWidth/2; 
		docheight = document.body.clientHeight;
	}
	if (type=='start'){
		$('tile-wrap').scrollTop = 3500;
		$('tile-wrap').scrollLeft = 2600;
		$('tile-wrap').setStyle('top',(((docheight-600)/2)+20));
		$('tile-wrap').setStyle('left',(((docwidth*2)-800)/2));
		$('menuu').setStyle('left',(((docwidth*2)-800)/2));
		$('menuu').setStyle('top',(((docheight-600)/2)-20));
		preload();
	}
}
		
function preload(){
	rand_no = Math.ceil(Math.random()*2);
	var path = 'images/back/';
	if (rand_no <2){
	//alert ('een');
	var images = [
		path + 'splash1.jpg',
		path + 'men1.jpg', 
		path + 'women1.jpg'
	];
	}else{
	//alert ('twee');
	var images = [
		path + 'splash2.jpg',
		path + 'men2.jpg', 
		path + 'women2.jpg'
	];
	}
	$('background').setStyle('background-image','url(images/back/splash'+rand_no+'.jpg)');
	

	var url = 'men.xml';
	var xhr = new XHR({
		method:'get', 
		onSuccess: function(r, t) {
		returnData=r;
		tabData=t;
		
		intro();
		var splashLoader = new Asset.images(images, {
		onProgress: function(i) {
				if (i==0){
				$('loading').setStyle('display', 'none');
				
				
				}
				if (i==2){
				
				}
				
		},
		onComplete: function(){
				
			parse(returnData, tabData, 'men');
			//alert (tabData);
			
		}
		});
		}
	});
	
	xhr.send(url);
}
		
window.addEvent('domready', function() {
	
});


window.addEvent('load', function(){

getwidth('start');

	pngFix();
});
		
window.addEvent('resize',function(){
	getwidth()
	$('tile-wrap').setStyle('top',(((docheight-600)/2)+20));
	$('tile-wrap').setStyle('left',(((docwidth*2)-800)/2));
	$('menuu').setStyle('left',(((docwidth*2)-800)/2));
	$('menuu').setStyle('top',(((docheight-600)/2)-20));
			
});

function scrollMe(amount, sexe, cat){
//console.log("amount:" + amount + " sexe: " + sexe + "cat: " + cat);
if (sexe == 'men'){ 
		xPos =3400;
	}else{
		xPos =1800;
	}
	
	if (amount>12){
		y = 4800-((((amount-12)/2)*2)*600);
		//console.log(y + "if");
		hoogte = y;
	}else{
		y = (((amount/2)*2)*600)+4800;
		//console.log(y + "else");
		hoogte = y;
	}
	
	
	
	var genScroll = new Fx.Scroll('tile-wrap', {
		wait: false,
		duration: 600,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	if (detail == true){
		detail = false;
		if (cat == 'pants'){
			hoogter = (amount*600)+4800;
		}else{
			hoogter = 4800-((amount-12)*600);
		}
		console.log(hoogter);
	
		var detailCatScroll = new Fx.Scroll('tile-wrap', {
			onComplete: function(){
			genScroll.scrollTo(xPos, hoogter);
			
			},
			wait: false,
			duration: 400,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		detailCatScroll.scrollTo(xPos, hoogter);
		
	}else{
		genScroll.scrollTo(xPos, y);
	}




if (cat=='pants'){
	$('cat_menu').setHTML(eval(sexe+'_pants_menu'));
	}else{
	$('cat_menu').setHTML(eval(sexe+'_tops_menu'));
	}	
}

function reelHome(){

	if (side != 'splash'){
		var up = true;
		function home(){
			homeScroll.scrollTo(2600, 4800);
			switchCat('splash');
			
		}
		
		
		var homeScroll = new Fx.Scroll('tile-wrap', {
			onComplete: function(){
			if (up == true){
				up = false
				home();
				}
			},
			wait: false,
			duration: 600,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		var detailHomeScroll = new Fx.Scroll('tile-wrap', {
			onComplete: function(){
			homeScroll.scrollTo(xxPos, 4800);
			detail = false;
			},
			wait: false,
			duration: 400,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		if (side =='men'){
			var xxPos =3400;
		}else{
			var xxPos =1800;
		}
		
		if (hoogte == 4800 || side=='info'){
		if (side =='info'){
			homeScroll.scrollTo(2600, 4800);
			up = false;
		}else{
			home();
			up = false;
			}
		}else{
		
			if (detail == false){
			homeScroll.scrollTo(xxPos, 4800);
			}else{
			detailHomeScroll.scrollTo(xxPos, hoogte);
			}
		}
		
	}	
}

function catHome(sexe){
	
	
	var menu_cat = menu_root + '<div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+sexe+'\')"><span class="menu_cat">'+sexe+' /</span></a></div>';
	$('cat_menu').setHTML(menu_cat);
	
	if (sexe =='men'){
		xPos =3400;
	}else{
		xPos =1800;
	}
	var genScroll = new Fx.Scroll('tile-wrap', {
		wait: false,
		duration: 600,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	if (detail == true){
	
	detail = false;
	var detailCatHome = new Fx.Scroll('tile-wrap', {
			onComplete: function(){
			
			genScroll.scrollTo(xPos, 4800);
			
			},
			wait: false,
			duration: 400,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
	});
	detailCatHome.scrollTo(xPos, hoogte);
		
	}else{
		hoogte = 4800;
		genScroll.scrollTo(xPos, 4800);
	}
	hoogte = y;
}

function detailSwitch(option, sexe, positie, color, fabric, cat){
$(sexe+'_detail_'+cat+'_large_'+positie).setHTML('<img src = "'+option+'" style="position: absolute; top: 30px; height:543px; width:400px">');
$(sexe+'_detail_'+cat+'_color_'+positie).setHTML(color);
$(sexe+'_detail_'+cat+'_fabric_'+positie).setHTML(fabric);
}

function scrollDetail(cat, positie, sexe, index, group){

	detail = true;
	function populate(){
			
			var pants_counter = 0;
			var tops_counter = 12;
			
			if (sexe == 'men'){
				Items=x_men[group].getElementsByTagName("ITEM");
				ItemParent=x_men[group].getElementsByTagName("NAME");
			}else{
				Items=x_women[group].getElementsByTagName("ITEM");
				ItemParent=x_women[group].getElementsByTagName("NAME");
			}
			
			
			Options=Items[index].getElementsByTagName("OPTION");
			var OptionString = '<table width="360" border="0" cellspacing="0" cellpadding="0"><tr>';
			if (Options.length == 0){
				$(sexe+'_detail_'+cat+'_options_'+positie).setHTML(OptionString);
			}
			
			for (i=0;i<Options.length;i++){
			
				itemValue=Options[i].getElementsByTagName("COLOR");{
					try{
					  OptionColor = itemValue[0].firstChild.nodeValue;
					  
					  }
					catch (er){
					  }
				}
				itemValue=Options[i].getElementsByTagName("FABRIC");{
					try{
					  OptionFabric = itemValue[0].firstChild.nodeValue;
					  
					  }
					catch (er){
					  }
				}
				itemValue=Options[i].getElementsByTagName("THUMB");{
					try{
					  OptionThumb = itemValue[0].firstChild.nodeValue;
					  
					  }
					catch (er){
					  }
				}
				itemValue=Options[i].getElementsByTagName("LARGE");{
					try{
					  OptionLarge = itemValue[0].firstChild.nodeValue;
					  
					  }
					catch (er){
					  }
				}
				itemValue=Options[i].getElementsByTagName("NAME");{
					try{
					
					  optionName = itemValue[0].firstChild.nodeValue;
					  OptionString += '<td width="72"><div class="option_item"><a href="#" onclick="detailSwitch(\''+OptionLarge+'\', \''+sexe+'\',\''+positie+'\',\''+OptionColor+'\',\''+OptionFabric+'\',\''+cat+'\')"><img src="'+OptionThumb+'" width="34" height="38"/><br>'+optionName+'</a></div></td>';
					  
					  }
					catch (er){
					  }
					 
					  if(i==4){
					  OptionString += '</tr><tr>';
					  }
					  if (i==(Options.length)-1){
					  OptionString += '</tr></table>';
					  }
					  
					  
				}
				$(sexe+'_detail_'+cat+'_options_'+positie).setHTML(OptionString);
			}
			
			
			itemValue=Items[index].getElementsByTagName("NAME");{
				try{
				  itemName = itemValue[0].firstChild.nodeValue;
				  $(sexe+'_detail_'+cat+'_title_'+positie).setHTML(itemName);
				  
				  }
				catch (er){
				  }
			}
			
			itemValue=Items[index].getElementsByTagName("DESC");{
				try{
				  itemDesc = itemValue[0].firstChild.nodeValue;
				  $(sexe+'_detail_'+cat+'_description_'+positie).setHTML(itemDesc);
					
				  }
				catch (er){
				  }
			}
			itemValue=Options[0].getElementsByTagName("COLOR");{
				try{
				  OptionColor = itemValue[0].firstChild.nodeValue;
				  $(sexe+'_detail_'+cat+'_color_'+positie).setHTML(OptionColor);
				  }
				catch (er){
				  }
			}
			itemValue=Options[0].getElementsByTagName("FABRIC");{
				try{
				  OptionFabric = itemValue[0].firstChild.nodeValue;
				  $(sexe+'_detail_'+cat+'_fabric_'+positie).setHTML(OptionFabric);
				  }
				catch (er){
				  }
			}
			itemValue=Options[0].getElementsByTagName("LARGE");{
				try{
				  itemLarge = itemValue[0].firstChild.nodeValue;
				  $(sexe+'_detail_'+cat+'_large_'+positie).setHTML('<img src = "'+itemLarge+'" style="position: absolute; top: 30px; height:543px; width:400px">');
				  }
				catch (er){
				  }
			}
			//setcatname//
			try{
				  ParentName = ItemParent[0].firstChild.nodeValue;
				  //alert (ParentName);
				  if (cat=='tops'){
				  	tops_counter=positie+12;
				   	$(sexe+'_detail_'+cat+'_subtitle_'+positie).setHTML('<a href="javascript:void()" onclick="scrollMe('+tops_counter+', \''+sexe+'\',\''+cat+'\')">< back to '+ParentName+'</a>');
				  }else{
				  	pants_counter=positie;
				  	$(sexe+'_detail_'+cat+'_subtitle_'+positie).setHTML('<a href="javascript:void()" onclick="scrollMe('+pants_counter+', \''+sexe+'\',\''+cat+'\')">< back to '+ParentName+'</a>');
				  
				  }
				  // alert(positie);
				  }
				catch (er){
				  }
			
			
			
			move();
			
		}
		
		function move() {
		//alert ('move it!');
		if (sexe == 'men'){
			xPos = 4200;
		}else{
			xPos = 1000;
		}
		
		
		if (cat=='pants'){
			yPos = (positie*600)+4800
		
		}else{
			yPos = 4800-(positie*600)
		}
		var genScroll = new Fx.Scroll('tile-wrap', {
			wait: false,
			duration: 600,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		genScroll.scrollTo(xPos, yPos);
		hoogte = yPos;
	}
	populate();
	
}
function switchInfo(){
side = 'info';
var genScroll = new Fx.Scroll('tile-wrap', {
		wait: false,
		duration: 600,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	genScroll.scrollTo(2600, 5374);
}
//-------------------------------------------------------------------------------------------------

function parse(r, t, sexe){
//alert ("parse");
	if (sexe == 'men' || sexe =='women'){
		
		if (sexe == 'men'){
		
		x_men = t.getElementsByTagName('GROUP_MEN');
		x = t.getElementsByTagName('GROUP_MEN');
		
		}else{
		x_women = t.getElementsByTagName('GROUP_WOMEN');
		x = t.getElementsByTagName('GROUP_WOMEN');
		}
		var tops = '<div></div>';
		var pants = '<div></div>';
		
		pants_menu = menu_root +'<div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+sexe+'\')"><span class="menu_cat">'+sexe+' /</div> <div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+sexe+'\')"><span class="menu_cat">pants /</span></a></div>';
		tops_menu = menu_root +'<div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+sexe+'\')"><span class="menu_cat">'+sexe+' /</div><div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+sexe+'\')"><span class="menu_cat">tops /</span></a></div>';
		var pants_counter = 0;
		var tops_counter = 12;
		
		for (i=0;i<x.length;i++)
		{
		
			xx=x[i].getElementsByTagName("NAME");
				{
				try
				  {
				  naam = xx[0].firstChild.nodeValue;
				  }
				catch (er)
				  {
				  }
				}
			xx=x[i].getElementsByTagName("THUMB");
				{
				try
				  {
				  thumb = xx[0].firstChild.nodeValue;
				  }
				catch (er)
				  {
				  }
				}
			xx=x[i].getElementsByTagName("LARGE");
				{
				try
				  {
				  large = xx[0].firstChild.nodeValue;
				  }
				catch (er)
				  {
				  }
				}
			xx=x[i].getElementsByTagName("CAT");
				{
				try
				  {
				  cat = xx[0].firstChild.nodeValue;
				  if (cat=='tops'){
				  	tops_counter ++;
				  	tops = tops+'<div class="cat_item"><a href="javascript:void()" onclick="scrollMe('+tops_counter+', \''+sexe+'\',\'tops\')"><img src=\"'+thumb+'\" style="height:125px; width:83px"><br>'+naam+'</a></div>';
				  	tops_menu+='<div class="topmenu_items"><a href="javascript:void()" onclick="scrollMe('+tops_counter+', \''+sexe+'\',\'tops\')"><span class="menu_small">'+naam+'</span></a></div>';
				  	addField(tops_counter, sexe, cat, i);
				  }else{
				  	pants_counter ++;
				  	pants = pants+'<div class="cat_item"><a href="javascript:void()" onclick="scrollMe('+pants_counter+', \''+sexe+'\',\'pants\')"><img src=\"'+thumb+'\" style="height:125px; width:83px"><br>'+naam+'</a></div>';
				  	pants_menu+='<div class="topmenu_items"><a href="javascript:void()" onclick="scrollMe('+pants_counter+', \''+sexe+'\',\'pants\')"><span class="menu_small">'+naam+'</span></a></div>';
				  	addField(pants_counter, sexe, cat, i);
				  }
				  }
				catch (er)
				  {
				  }
				}
				
				
		}
		
		$(sexe+'_tops').setHTML(tops);
		$(sexe+'_pants').setHTML(pants);
		
		
		if (sexe == 'men'){
		men_tops_menu = tops_menu;
		men_pants_menu = pants_menu;
		//alert ("klaar_men");
		parse(returnData, tabData, 'women');
		

		}else{
		women_tops_menu = tops_menu;
		women_pants_menu = pants_menu;
		//alert ("klaar_women");
		}
		
		pngFix();
		
	}
	
}



function backgroundSwitch(type){

	var growDiv = new Fx.Style($('background'),
	'opacity', {duration: 800}).addEvent('onComplete', function() {
	$('background').setStyle('background-image','url(images/back/'+type+rand_no+'.jpg)');
	
	$('background').addEvent('load', function(){alert('loaded!')});
	var growDiv2 = new Fx.Style($('background'),
	'opacity', {duration: 800}).addEvent('onComplete', function() {
	var menu_cat = menu_root + '<div class="topmenu_items"><a href="javascript:void()" onclick="catHome(\''+type+'\')"><span class="menu_cat">'+type+' /</span></a></div>';
	if (type != 'splash'){
	$('cat_menu').setHTML(menu_cat);
	$('cat_menu').setStyle('display', 'block');
	}
	});
	growDiv2.start(1);
	});
	growDiv.start(0);
}
		

function switchCat(cat){
	
	side = cat

	
	
	backgroundSwitch(cat);
	if (cat == 'splash'){
	$('cat_menu').setStyle('display', 'none');
	}else{
	//parse(returnData, tabData, cat);
	}
}

function popitup(name, url) {
	newwindow=window.open(url,'news','height=400,width=250');
	if (window.focus) {newwindow.focus()}
	//return false;
}