/*
   Author: Chris Abrams
*/

/*
   Grid
*/
$(document).ready(function() {
    
  //Sets right side height to window's height
  var height = $(window).height();
  $('#left, #right, #plbg, #pbg, #prbg').height(height);
  /*height = height - 55;
  $('#port-container').height(height);*/
  
  //Center left side vertically
  $('#left-container').center({
  	against: 'parent'
  });
  
  $(window).resize(function() {
  	//Sets right side height to window's height
    var height = $(window).height();
    $('#left, #right, #plbg, #pbg, #prbg').height(height);
    /*height = height - 55;
    $('#port-container').height(height);*/
    
    //Center left side vertically
    $('#left-container').center({
    	against: 'parent'
    });
  });
  
  //Fetch collectiond data
  $.getJSON('data/collections.json', function(res) {
  	count = res.collections.count;
  	items = res.collections.items;
  	var list = new Array();
  	
  	$.each(items, function(key, item) {
  		list.push('<li data-id="'+item.id+'"><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+item.filename+'" alt="" /></li>');
  	});

  	$('#port-container').append(list.join(""));
  	
  	$('#port-container').skrewler({
  		direction: "vertical",
  		leftUpButtonID: "#aup",
  		rightDownButtonID: "#ado"
  	});
  	
  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
		Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
  	Cufon.refresh;
  });
  
  //Web Design
  $('#wd').click(function() {
  	$.getJSON('data/collections.json', function(res) {
    	count = res.collections.count;
    	items = res.collections.items;
    	var list = new Array();
	  	
	  	$.each(items, function(key, item) {
	  		if(item.catid == 1) {
	  			list.push('<li data-id="'+item.id+'"><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+item.filename+'" alt="" /></li>');
	  		}
	  	});
	  	
	  	if($('#port-container').length == 0) {
	  		$('#pbg').html('').append('<ul id="port-container"></ul>');
	  	}

	  	$('#port-container').html('').append(list.join(""));
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
    });
  });
  
  //Print Design
  $('#pd').click(function() {
  	$.getJSON('data/collections.json', function(res) {
    	count = res.collections.count;
    	items = res.collections.items;
    	var list = new Array();
	  	
	  	$.each(items, function(key, item) {
	  		if(item.catid == 2) {
	  			list.push('<li data-id="'+item.id+'">><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+item.filename+'" alt="" /></li>');
	  		}
	  	});
	  	
	  	if($('#port-container').length == 0) {
	  		$('#pbg').html('').append('<ul id="port-container"></ul>');
	  	}

	  	$('#port-container').html('').append(list.join(""));
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
    });
  });
  
  //Identity Design
  $('#id').click(function() {
  	$.getJSON('data/collections.json', function(res) {
    	count = res.collections.count;
    	items = res.collections.items;
    	var list = new Array();
	  	
	  	$.each(items, function(key, item) {
	  		if(item.catid == 3) {
	  			list.push('<li data-id="'+item.id+'"><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+item.filename+'" alt="" /></li>');
	  		}
	  	});
	  	
	  	if($('#port-container').length == 0) {
	  		$('#pbg').html('').append('<ul id="port-container"></ul>');
	  	}

	  	$('#port-container').html('').append(list.join(""));
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
    });
  });
  
  //<li> click
  $('#port-container li').live('click', function() {
  	
  	id = $(this).data('id');
  	path = 'data/collection_'+id+'.json';
  	$.getJSON(path, function(res) {
    	count = res.collection.count;
    	items = res.collection.items;
    	type  = res.collection.type; if(type == '') {type = 'horizontal';}
    	var list = new Array();
    	
    	$('#pbg')
				.html('<div id="subbg"><a id="subclose" href="#"></a><ul id="sublist"></ul></div>');
				
			if(count > 1) {
				$('#subbg').append('<div id="slider-container"><div id="slider"></div></div>');
				$('#slider-container').append('<div id="arrleft"></div><div id="arrright"></div>');
			}
	  	
	  	$.each(items, function(key, item) {
	  		list.push('<li class="sub-'+type+'" data-id="'+item.id+'"><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+id+'/'+item.filename+'" alt="" /></li>');
	  	});
			
			$('#subbg')
				.center({
		    	against: 'parent'
		    })
		    .find('#sublist')
				.append(list.join(""));
				
			$('#sublist li[data-id=1]').show();
			
			if(count > 1) {
				$('#slider')
				.slider({
					min: 1,
					max: count,
					value: 1,
					step: 1,
					slide: function(event, ui) {
						$('#sublist li').hide();
						$('#sublist li[data-id="'+ui.value+'"]').show();
					},
					change: function(event, ui) {
						$('#sublist li').hide();
						$('#sublist li[data-id="'+ui.value+'"]').show();
					}
				});
				
				$.extend($.ui.slider.prototype, {
					up: function() {
						this.value(this.value() + this.options.step);
					},
					down: function() {
						this.value(this.value() - this.options.step);
					}
				});

				$("#arrleft").click(function() {
					$("#slider").slider("down");});
				$("#arrright").click(function() {
					$("#slider").slider("up");
				});
			}
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
    });
  });
  
  //Sub Close
  $('#subclose').live('click', function() {
  	
  	$('#pbg').html('<ul id="port-container"></ul>');
  	
  	$.getJSON('data/collections.json', function(res) {
    	count = res.collections.count;
    	items = res.collections.items;
    	var list = new Array();
	  	
	  	$.each(items, function(key, item) {
	  		list.push('<li data-id="'+item.id+'"><h2><span class="hCat">'+item.category+' &#47;&#47;</span> <span class="hItem">'+item.title+'</span></h2><img src="cdn/collections/'+item.filename+'" alt="" /></li>');
	  	});

	  	$('#port-container').html('').append(list.join(""));
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
	  	
	  	$('#port-container').skrewler({
	  		direction: "vertical",
	  		leftUpButtonID: "#aup",
	  		rightDownButtonID: "#ado"
	  	});
    });
  	
  	return false;
  });
  
  //About
  $('#ab').click(function(e) {
  	e.preventDefault();
  	
  	$('#pbg')
			.html('<div id="aboutbg"><a id="subclose" href="#"></a></div>')
			.find('#aboutbg')
			.center({
	    	against: 'parent'
	    });
	    
	  $.getJSON('data/about.json', function(res) {
	  	r = res.about;
	  	
	  	$('<div id="aboutContainer"><h2><span class="hCat">'+r.title+' &#47;&#47;</span> <span class="hItem">'+r.name+'</span></h2><img src="'+r.img+'" alt="" /><div id="mright">'+r.mright+'</div><div id="mbottom">'+r.mbottom+'</div><div id="soContainer"><a id="soTwitter" href="http://twitter.com/kristenmassey" target="_new"></a><a id="soLink" href="http://www.linkedin.com/in/kristenmassey" target="_new"><a id="soDribbble" href="http://dribbble.com/kristenmassey" target="_new"><a id="soMail" href="mailto:kristenmassey@gmail.com" target="_new"></div>').appendTo('#aboutbg');
	  	//<a id="ha" href="#"></a>
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
	  });
  });
  
  //About page2
  $('#ha').live('click', function(e) {
  	e.preventDefault();
  	
  	$('#pbg')
			.html('<div id="aboutbg"><a id="subclose" href="#"></a></div>')
			.find('#aboutbg')
			.center({
	    	against: 'parent'
	    });
	    
	  $.getJSON('data/about2.json', function(res) {
	  	r = res.about;
	  	
	  	$('<h2><span class="hCat">'+r.title+' &#47;&#47;</span> <span class="hItem">'+r.name+'</span></h2><span id="ha2"></span><div id="haContainer"></div>').appendTo('#aboutbg');
	  	
	  	$.each(r.ha, function(key, val) {
	  		$('<span class="haTitle">'+val.title+'</span><span class="haText">'+val.text+'</span>').appendTo('#haContainer');
	  	});
	  	
	  	Cufon.replace('.hCat', { fontFamily: 'GothamThin' });
			Cufon.replace('.hItem', { fontFamily: 'GothamBook' });
	  	Cufon.refresh;
	  });
  });
});