/*	James

	File:		Work JS
	Author:		James Brannon

	-------------------------------------------------------------------------------------------------------------------- */
	
	function Work(job,timer) {this.active;this.job=job;this.init(job,timer);}
		Work.prototype = {
			init: function(job,timer) {
				var instance = this;
				this.active = 0;
				this.timer = timer;

				//- if preview already exists, remove it
				if(document.getElementById('preview')){
					window.clearInterval(interval);
					$('#preview').remove();
				};
				
				//- define carousel vars
				var view = this.view(job);
				
				//- add it to stage before grid
				$('#work').before(view);
				//- adjust layout to compensate
				this.layout = new Layout(construct);
				//- define indicator (controls) padding
				this.pad = parseInt($('#controls .indicator').css('backgroundPosition').substring(3, this.length-1));
				
				//- set slideshow timer
				window.interval = this.intervals();
		
			},
			view: function(job){
				var instance = this;
				
				//- create page elements
				var preview = document.createElement('section'),
					article = this.carousel(job.images),
					aside1 = document.createElement('aside'),
					aside2 = document.createElement('aside'),
					aside3 = document.createElement('aside')
					header1 = document.createElement('h2'),
					sub1 = document.createElement('h3'),
					sub2 = document.createElement('h3'),
					sub3 = document.createElement('h3'),
					p1 = document.createElement('p'),
					p2 = document.createElement('p'),
					p3 = document.createElement('p'),
					social = document.createElement('ul'),
					twitter = document.createElement('li'),
					facebook = document.createElement('li'),
					tweet = document.createElement('a'),
					face = document.createElement('a');
				
				//- add attributes
				preview.id = 'preview',
				preview.className = 'preview',
				aside1.className = 'details',
				aside2.className = 'objective',
				aside3.className = 'result',
				twitter.className = 'tw',
				facebook.className = 'fb',
				tweet.setAttribute('title','Twitter'),
				$(tweet).click(function() {instance.tweet()});
				face.setAttribute('title','Facebook');
				$(face).click(function() {instance.fwall()});
				
				//- add data
				header1.innerHTML = job.job,
				sub1.innerHTML = job.tagline,
				sub2.innerHTML = 'Objective',
				sub3.innerHTML = 'Result',
				p1.innerHTML = job.skillset,
				p2.innerHTML = job.objective,
				p3.innerHTML = job.result;
				
				//- construct
				twitter.appendChild(tweet),
				facebook.appendChild(face),
				social.appendChild(twitter),social.appendChild(facebook),
				aside1.appendChild(header1),aside1.appendChild(sub1),aside1.appendChild(p1),aside1.appendChild(social),
				aside2.appendChild(sub2),aside2.appendChild(p2),
				aside3.appendChild(sub3),aside3.appendChild(p3),
				preview.appendChild(article),preview.appendChild(aside1),preview.appendChild(aside2),preview.appendChild(aside3);
				
				//- return
				return preview;
			},
			carousel: function(images){
			
				//- create carousel elements
				var instance = this,
					article = document.createElement('article'),
					slideshow = document.createElement('section'),
					border = document.createElement('div'),
					list = document.createElement('ul'),
					controls = document.createElement('footer'),
					title = document.createElement('p'),
					indicator = document.createElement('div'),
					navs = document.createElement('ul');
				
				//- slideshow attributes
				slideshow.id = 'carousel',
				slideshow.className = 'carousel';
				
				//- add images and nav button
				var i;
				for(i=0;i<images.length;i++){
				
					//- create
					var item = document.createElement('li'),
						image = document.createElement('img'),
						block = document.createElement('li'),
						button = document.createElement('a');
					
					//- image attributes
					image.setAttribute('src', '/assets/jpg/work/960/'+images[i].file+'.jpg'),
					image.setAttribute('alt', images[i].title),
					image.setAttribute('title', images[i].title);
					
					//- nav attributes
					button.setAttribute('title', images[i].title);
					button.setAttribute('data-id', i);
					$(button).click(function() {instance.navigate(parseInt($(this).attr('data-id')))});
					/*	$(button).hover(function() {
								instance.over(parseInt($(this).attr('data-id')))
							}, function() {
								instance.out();
						});		*/
					
					//- append image
					item.appendChild(image),
					list.appendChild(item);
					
					//- append nav button
					block.appendChild(button),
					navs.appendChild(block);
				}
				
				//- build slideshow
				border.appendChild(list),
				slideshow.appendChild(border);
				
				//- controls attributes
				controls.id='controls',
				controls.className='controls',
				title.innerHTML=images[0].title,
				indicator.className='indicator';
				
				//- build controls
				indicator.appendChild(navs),
				controls.appendChild(title),
				controls.appendChild(indicator);
				
				//- build carousel
				article.appendChild(slideshow),
				article.appendChild(controls);
				
				//- return carousel article
				return article;
				
			},
			navigate: function(pos){
				var instance = this;
				this.active = pos;
				
				var offset = parseInt(-($('#carousel ul li').width()*pos)),
					indicator,
					viewport = document.body.clientWidth;
				
				//- reset slideshow interval
				window.clearInterval(interval);
				window.interval = this.intervals();
		
				//- only action if > 768 screen resolution
				if(viewport>=768){
					//- animate image and controls
					indicator = ($('#controls li').width()*pos)+this.pad+(this.pad*pos);
					$('#carousel ul').stop().animate({marginLeft:offset}, 500, 'easeOutCirc');
					$('#controls .indicator').stop().animate({backgroundPosition:indicator}, 500, 'easeOutCirc');
					//- alter caption
					this.caption(pos);
				}
			},
			over: function(pos){
				var ipos = ($('#controls li').width()*pos)+this.pad+(this.pad*pos);
				$('#controls .indicator').stop().animate({backgroundPosition:ipos}, 250, 'easeOutCirc');
			},
			out: function(){
				var ipos = ($('#controls li').width()*this.active)+this.pad+(this.pad*this.active);
				$('#controls .indicator').stop().animate({backgroundPosition:ipos}, 500, 'easeOutCirc');
			},
			tweet: function(){
				var url = $.address.baseURL()+'/#/'+this.job.base,
					message = 'James // '+this.job.job,
					hash = '#design';
				
				//- send tweet
				tweetThis([url,message,hash]);
				
				//- track request
				trackme('share','twitter',this.job.job.toLowerCase());
			},
			fwall: function(){
				var url = $.address.baseURL()+'/#/'+this.job.base,
					title = 'James // '+this.job.job;
				
				//- sahre on wall
				wallThis([url,title]);
				
				//- track request
				trackme('share','facebook',this.job.job.toLowerCase());
			},
			caption: function(id){
				$('#controls p').html(this.job.images[id].title);
			},
			intervals: function(){
				var instance = this;
				return setInterval( function(){ instance.auto(); }, instance.timer );
			},
			auto: function(){
			
				//- only action if > 768 screen resolution
				var viewport = document.body.clientWidth;
				if(viewport>=768){
				
					//- calculate next slide
					var npos;
					if( this.active<(this.job.images.length-1) ){
						npos = this.active+1;
					}else{
						npos = 0;
					}
					
					//- navigate to next slide
					this.navigate(npos);
				}
				
			}
				
		}