var Router = EXANIMO.managers.StateManager;
Router.onstaterevisit = function(e)
{
	Portfolio.jumpTo(e.id);
}

/*class for portfolio items*/
var PortfolioItem = function(id) { this.initialize(id); };
PortfolioItem.prototype = {
	width: 630,
	dur: 300,
	media: null,
	initialize: function(id) {
		this.id = id;
		var el = $(this.id);
		el.style.position = 'absolute';
		el.style.left = 0;
		el.style.top = 0;
		this.anim = new Fx.Style (this.id,'left', { duration: this.dur,  transition: Fx.Transitions.linear, onComplete: this.slid.bind(this) });
		this.imgs = false;
		this.setupMedia();
		
		if($(this.id).visible()) { this.startup(); }
	},
	slideRight: function(dur) {
		var start = 0;
		var end = this.width;
		
		this.anim.options.duration = this.dur;
		if(dur) {
			this.anim.options.duration = dur;
		}
		if(!$(this.id).visible()) {
			start = 0 - this.width;
			end = 0;
			$(this.id).style.left = start+'px';
			$(this.id).show();
		}					
		else
		{
			this.media.pause();
		}
		this.anim._start(start,end);
	},
	slideLeft: function(dur) {
		var start = 0;
		var end = 0 - this.width;
		
		this.anim.options.duration = this.dur;
		if(dur) {
			this.anim.options.duration = dur;
		}
		
		if(!$(this.id).visible()) {
			start = this.width;
			end = 0;
			$(this.id).style.left = start+'px';
			$(this.id).show();
		}
		else
		{
			this.media.pause();
		}
		this.anim._start(start,end);
	},
	slid: function() {
		if($(this.id).offsetLeft == 0) {
			Portfolio.setActive(this.id);
		} else {
			this.shutdown();
		}
	},
	startup: function()
	{
		//document.location.hash = this.id;
		Router.setState(this.id);
		$(this.id+'Link').addClassName('active');
		this.media.play();
	},
	shutdown: function()
	{
		$(this.id+'Link').removeClassName('active');
		$(this.id).hide();
	},
	setupMedia: function()
	{
		//prevent images from loading --then load accordingly using javascript w/ preloader
		/*var imgrs = $(this.id+'_imgs').cleanWhitespace().childNodes;
		for(var i = 0; i < imgrs.length; i++) {
			//imgrs[i].src = '';
		}*/
		
	
		if(!this.imgs && $(this.id+'_imgs')) {
			this.imgs = {};
			this.imgs.id = this.id+'_imgs';
			this.imgs.name = 'frontend';
			this.imgs.xfader = new XFader(this.id+'_imgs');
			this.media = this.imgs.xfader;
			this.activeImgs = 'front';
		}
		
		if($(this.id+'_video')) {
			this.media = new Video(this.id);
		}
		
	}
}

var Portfolio = {
	items:  new Array(),
	activeItem: 0,
	moving: false,
	queue: new Array(), 
	defaultStart: 'demandware',
	init: function()
	{
		//initialize router
		Router.defaultStateID = Portfolio.defaultStart;
		Router.initialize();
		var show_id = Router.getState();
		
		//setup portfolio
		var con = $('portItemCon');
		con.style.overflow = 'hidden';
		con.style.height = '400px';
		portItems = con.cleanWhitespace().childNodes;
		for(i = 0; i < (portItems.length-1); i++)
		{
			if(show_id != portItems[i].id) { $(portItems[i].id).hide(); }
			else { Portfolio.activeItem = Portfolio.items.length; }
			Portfolio.items[Portfolio.items.length] = new PortfolioItem(portItems[i].id);
		}
		Portfolio.showPrevNext();
	},
	calcDur: function()
	{
		if(Portfolio.queue.length > 0) {
			return (300/(Portfolio.queue.length+1));
		}
		return false;
	},
	showPrevNext: function()
	{
		new Insertion.Bottom('portNav', '\
											<a id="prevLink" onclick="return false;" href="#">Previous</a>\
											<a id="nextLink" onclick="return false;" href="#">Next</a>');
		Event.observe('prevLink', 'click',Portfolio.doPrev);
		Event.observe('nextLink', 'click',Portfolio.doNext);
		
		Portfolio.checkButtons();
	},
	checkButtons: function()
	{
		if(Portfolio.activeItem + 1 > Portfolio.items.length - 1) {
			$('nextLink').hide();
		} else {
			$('nextLink').show();
		}
		
		if(Portfolio.activeItem - 1 < 0) {
			$('prevLink').hide();
		} else {
			$('prevLink').show();
		}
	},
	doNext: function()
	{
		if(Portfolio.moving == false)
		{
			if(Portfolio.activeItem + 1 < Portfolio.items.length) {
				Portfolio.moving = true;
				dur = Portfolio.calcDur();
				Portfolio.items[Portfolio.activeItem].slideLeft(dur);
				Portfolio.items[Portfolio.activeItem + 1].slideLeft(dur);
				Portfolio.activeItem++;
				Portfolio.checkButtons();
			} else {
				return false;
			}
		}
		else
		{
			Portfolio.queue[Portfolio.queue.length] = 'next';
		}
		return true;
	},
	doPrev: function()
	{
		if(Portfolio.moving == false)
		{
			if(Portfolio.activeItem - 1 > -1) {
				Portfolio.moving = true;
				dur = Portfolio.calcDur();
				Portfolio.items[Portfolio.activeItem].slideRight(dur);
				Portfolio.items[Portfolio.activeItem - 1].slideRight(dur);
				Portfolio.activeItem--;
				Portfolio.checkButtons();
			} else {
				return false;
			}
		}
		else
		{
			Portfolio.queue[Portfolio.queue.length] = 'prev';
		}
		return true;
	},
	checkQueue: function()
	{
		/*
		hopefully this will be a better queue processing system
		var keepChecking = true;
		while(keepChecking == true && Portfolio.queue.length > 0) {
			if(Portfolio.queue.shift() == 'next') {
				keepChecking = !(Portfolio.doNext());
			}
			else {
				keepChecking = !(Portfolio.doPrev());
			}
		}
		return keepChecking
		*/
		
		if(Portfolio.queue.length > 0)
		{
			if(Portfolio.queue.shift() == 'next') {
				Portfolio.doNext();
			}
			else {
				Portfolio.doPrev();
			}
			return true;
		}
		return false;
	},
	setActive: function(id)
	{
		Portfolio.moving = false;
		if(!Portfolio.checkQueue())
		{
			Portfolio.items[Portfolio.activeItem].startup();
		}
	},
	jumpTo: function(pos)
	{
		if(Portfolio.moving == false) //not sure about this -- maybe override the current queue
		{
			if(isNaN(pos))
			{
				var a = 0;
				while(pos != Portfolio.items[a].id) a++;
				pos = a;
			}
			
			var diff = pos - Portfolio.activeItem;
			if(pos < Portfolio.activeItem)
			{
				Portfolio.queue = new Array();
				for(var i = 0; i < Math.abs(diff)-1; i++)
				{
					Portfolio.queue[Portfolio.queue.length] = 'prev';
				}
				Portfolio.doPrev();
			}
			if(pos > Portfolio.activeItem)
			{
				Portfolio.queue = new Array();
				for(var i = 0; i < Math.abs(diff)-1; i++)
				{
					Portfolio.queue[Portfolio.queue.length] = 'next';
				}
				Portfolio.doNext();
			}
		}
	}
}

function flashCallback(mov, func) {
	var callback = document.getElementById(mov).callback;
	var args = Array.slice(arguments, 2);
	callback[func].apply(callback, args);
}

var Video = function(id) { this.init(id); }
Video.prototype = {
	id: null,
	container: null,
	alt: null,
	init: function(id) {
		this.id = id;
		this.flash = this.id+'_video_player';
		this.container = this.id+'_video_flash';
		this.alt = this.id+'_video_alt';
		
		
		var so = new SWFObject('inc/swf/video_player.swf',this.flash,'350','277','9.0.47','#ffffff');
		so.write(this.container);
	},
	play: function() {
		$(this.container).show();
		$(this.alt).hide();
	},
	pause: function() {
		$(this.container).hide();
		$(this.alt).show();
	}
}

var XFader = function(id, opts) { this.init(id, opts); }
XFader.prototype = {
	id: null,
	inter: null,
	options: {},
	init: function(id, opts) {
		this.id = id;
		this.options = {
						fadeDuration: 600,
						imgDuration: 2500,
						autoStart: false
						}
		Object.extend(this.options, opts || {});
		
		if(!this.imgs)
		{	
			this.imgs = $(this.id).cleanWhitespace().childNodes;
			for(var i = 0; i < this.imgs.length; i++)
			{
				fade = new Fx.Style(this.imgs[i].id,'opacity', { duration: this.options.fadeDuration });
				Object.extend(this.imgs[i],fade);
			}
			
			this.xfadein = 0;
			this.xfadeout = 0;
		}
		if(this.options.autoStart) { this.play(); }
	},
	doXfade: function() {
		this.imgs[this.xfadein].set(0).show();
		this.imgs[this.xfadein]._start(0,1);
		this.imgs[this.xfadeout]._start(1,0);
	},
	//user control functions
	pause: function() {
		clearInterval(this.inter);
	},
	play: function()
	{
		this.inter = setInterval(this.next.bind(this), this.options.imgDuration);
	},
	prev: function()
	{
		this.xfadeout = this.xfadein;
		this.xfadein = this.xfadein - 1;
		if(this.xfadein < 0 ) {
			this.xfadein = (this.imgs.length - 1);
		}
		this.doXfade();
	},
	next: function()
	{
		this.xfadeout = this.xfadein;
		this.xfadein = this.xfadein + 1;
		
		if(this.xfadein == this.imgs.length) {
			this.xfadein = 0;
		}
		this.doXfade();
	}
}