var iphoneSlider = {
	options: {
		delay: 1000,
		duration: 300
	},
	init: function(wrapperID, options){
		$.extend(this.options, options || {});
		this.block = $('#' + wrapperID);
		this.size = {
			width: this.block.width(),
			height: this.block.height()
		};
		this.wrap = this.block.find('.wrap');
		this.timelineImage = this.wrap.find('img');
		var timelineWidth = this.timelineImage.width();
		
		this.wrap.css({
			'width': timelineWidth*2,
			'marginLeft': 0
		});
		this.steps = timelineWidth / this.size.width;
		this.timelineImage.clone().appendTo(this.wrap);
		
		// lets start the show 
		// using setTimeout to add some delay between frame switch
		window.setTimeout($.proxy(this.start, this), this.options.delay);
	},
	start: function(){
		var _this = this;
		var margin = parseInt(this.wrap.css('marginLeft')) - this.size.width;
		var bReset = false;		

		if(this.size.width * this.steps + margin < 0){
			this.wrap.css('marginLeft', 0);
			margin = -_this.size.width;
		};
		
		this.wrap
			.animate({
					marginLeft: margin - 15
				}, {
					queue: true,
					duration: this.options.duration,
					easign: 'easeOutQuart'
			}).animate({
					marginLeft: margin
				}, {
					duration: 30,
					easign: 'easeInQuart',
					complete: function(){
						this.style.marginLeft = margin + 'px';
						_this.timer = window.setTimeout($.proxy(_this.start, _this), _this.options.delay);
					}
				});
	},
	stop: function(){
		window.clearTimeout(this.timer);
		return false;
	}
};
//----------------------------------

var storySlider = {
	currentStep: null,
	currentElement: null,
	prevElement: null,
	direction: 0,
	elements: [],
	animating: 0,
	timer: null,
	delay: 0,
	init: function(options){
		var _this = this;
		$.extend(this, options || {});

		this.wrap = $('#story');
		this.width = this.wrap.parent().width();
		this.height = this.wrap.parent().height();
		this.preloadOverlay = $('#teaserPreloadOverlay');
		
		var _linksWrap =  $('#storySliderLinks').empty();
		var _elements = this.wrap.find('.story-block');
		
		_elements.each(function(i, _link){
			var $element = $(this);
			var data = {
				wrap: $element,
				shot: $element.find('.screenshot img'),
				projectInfo: $element.find('.project-info .project'),
				clientInfo: $element.find('.project-info .client'),
				loaded: false
			};
			var num = i+1;
			_this.elements[i] = data;
			_this.elements[i].$link = $('<a href="#"></a>').appendTo(_linksWrap).html('<span>'+ num +'</span>');
			_this.elements[i].$link.click(function(){
				clearInterval(_this.timer);
				_this.loadStep(i);
				return false;
			});
		});
		
		if(this.delay) {
			this.timer = window.setInterval(function(){
				_this.nextStep();
			}, this.delay);
		};
		
		this.loadStep(0);
	},
	nextStep: function(){
		var _step = this.currentStep + 1;
		var _max = this.elements.length - 1;
		if(_step > _max)
			this.loadStep(0);
		else
			this.loadStep(_step);
	},
	prevStep: function(){
		var _step = this.currentStep - 1;
		if(_step < 0)
			this.loadStep(this.elements.length - 1);
		else
			this.loadStep(_step);	
	},
	loadStep: function(_index){
		var _this = this;
		if(_index == this.currentStep || this.animating) return false;
		
		this.currentElement = this.elements[_index];
		this.prevElement = this.elements[this.currentStep];

		var _direction = this.currentStep == null ? 'start' : (_index > this.currentStep ? 'next' : 'prev');
		
		switch(_direction){
			case 'start': 
				this.direction = 0;
				this.currentElement.wrap.css('display', 'block');
			break;		
			case 'next': 
				this.direction = 1;
				this.currentElement.wrap.css('display', 'block');
			break;
			case 'prev': 
				this.direction = -1;
				this.wrap.css('marginTop', -1 * this.height);
				this.currentElement.wrap.css('display', 'block');
			break;
			
		};
		
		this.showStep(_index);
		this.currentStep = _index;
	},
	showStep: function(_index){
		var _this = this;
		var _cssProp = 'marginTop';
		var _cssVal = 0;
		var _animOptions = {
			duration: 300,
			complete: function(){
				_this.resetStage();
			}
		};
		
		if(this.direction > 0) {
			_cssVal = -1 * this.height;
		} else if(this.direction < 0) {			
		} else if(this.direction == 0) {
		};
		//this.preloadOverlay.fadeOut(200);
		this.wrap.animate({'marginTop': _cssVal}, _animOptions);
		this.elements[_index].loaded = true;
		this.elements[_index].$link.addClass('active');
		if(this.prevElement)
			this.prevElement.$link.removeClass('active');
		this.animating = 1;
	},
	resetStage: function(){
		this.animating = 0;	
		this.wrap.css('marginTop', '0%');			
		
		if(this.prevElement) {
			this.prevElement.wrap.css('display', 'none');
		}
	}
};