var Cases = function(caseInfo, lang) {

	// config
	var assetFolder = "/_site/content/cases/";
	var imglistFolder = assetFolder + 'listimg/';
	var videoFolder = assetFolder + 'video/';
	var posterFolder = assetFolder + 'video/poster/';
	var videoThumbFolder = assetFolder + 'video/thumb/';
	var galleryFolder = assetFolder + 'gallery/';
	var galleryThumbFolder = assetFolder + 'gallery/thumb/';
	var cardColors = ['pistage','black-green','black-blue','yellow','purple','grey-blue','grey-orange'];
	
	// default contact info for cases
	var defaultContactName = "Jesper Wahlström";
	var defaultContactEmail = "jesper@projector.se";
	var defaultContactPhone = "+46 (0)70 345 67 89";
	
	var $video;
	var currSrc = ""
	var $videoPlayer;
	var videoStr = ""
	var caseData;
	var language = lang
	var $gallery = $("#case-gallery")
	var galleryImg 
	
	// verify that case data has been loaded
	if (typeof caseInfo != 'object') {
		alert("Cases has no data to work with.")
		return;
	}
	
	//Sort on date
	caseInfo.sort(function(a, b){
	 var dateA=parseDate(a.date), dateB=parseDate(b.date)
	 return dateB-dateA
	})

	function parseDate(datestr) 
	{
		var yearstr = datestr.substring(0,4)
		var monthstr = parseInt(datestr.substring(5,7))-1
		var daystr = datestr.substring(8,10)
	
		var newDate = new Date(yearstr, monthstr, daystr)
		return newDate
	}
		
	function parseHash() {
		var hash = location.hash;
		var hashStructure = {client:false, project: false};
		if (hash) {
			var segments = hash.split('/');
			hashStructure.isShowreel = segments[0] == '#showreel';
			hashStructure.client 	= (segments.length > 0) ? segments[1] : false;
			hashStructure.project	= (segments.length > 1) ? segments[2] : false;
		}
		return hashStructure;
	}
	
	// css fixes
	function fixCss() {
		
		if (isIpadComp) return; // ipad has fixed win dimensions so no need to fix anything...
		
		// get window height
		var winHeight = $(window).height();
		
		// single case wrap
		var wrap = $("#singleCaseWrap");
		var wrapMargins = wrap.outerHeight() - wrap.height();
		var wrapHeight = winHeight - $("#singleCaseTop").outerHeight() - wrapMargins;
		wrap.css({height: wrapHeight});
		
		// all cases container
		var wrap = $("#casesScrollWrap");
		var wrapMargins = wrap.outerHeight() - wrap.height();
		var wrapHeight = winHeight - $("#caseTop").outerHeight() - wrapMargins;
		wrap.css({height: wrapHeight});
	}
	
	
	// util functions
	Function.prototype.startTimer = function() {this.execStart = new Date().getTime();}
	Function.prototype.getTimer = function() {return new Date().getTime() - this.execStart;}
	var caseObj = function(params, key) {return params[key] || params['default'];}
	
	// cache oft-used jQuery vars
	var $casesAll 	= $("#caseAllScroller");
	var $singleCase = $("#caseSingleScroller");	
	var $theCase 	= $("#showcaseSingle");
	
	// global var for tracking changes in window size
	var windowHeight = $(window).height();
	
	function generateCaseCards() {
		
		// create case cards for each item in data array
		for (var i=0, n=caseInfo.length, s=''; i <n; i++) {
			var c = caseInfo[i];
			s += '<div caseid="case' + c.id + '" client="' + c.client + '" class="' + (c.css || 'default') + '" style="background-image:url(' + (imglistFolder+ c.listimg) + ')">';
			//s += '<div style="float:right; padding:6px;"><img src="/_site/img/projector_logo_smallest.png" /></div>'
			s += '<div class="case-card-content">'
			s += '<span class="case-card-client">' + c.client + '</span><br />'
			s += '<span class="case-card-title">' + (c.label || c.headline) + '</span>';
			s += '</div>';
			s += '</div>'; 
		}	
		$casesAll.html(s);		
		Cufon.replace('.case-card-title');
	}
	
	(function createClientsSelectBox() {
		var clients = ['Visa alla'];
		for (var i=0, n=caseInfo.length, s=''; i<n; i++) {
			var client = caseInfo[i].client;
			for (var j=0, o=clients.length, isRegistered=false; j<o; j++) {
				if (client == clients[j]) {
					isRegistered = true;
					break;
				}
			}
			// register client 
			!isRegistered && clients.push(client);
		}
		// insert <li> with clients into clients select box
		var s = '<li>' + clients.join('</li><li>');
		$("#case-select-clients ul").html(s);
	})();
	
	// set height of cases container to cover the viewport (exact height required for scrollbars to work);
	!isIpadComp && $("#casesScrollWrap").css({height: windowHeight - $("#caseTop").outerHeight()});

	// resize cases container so that it can be centered on page
	function resizeCasesContainer() {
		// determine available width on screen
		var viewWidth = $(window).width();
		
		// determine width of each case
		var caseWidth = $casesAll.find(">div:first").outerWidth(true);
		// calculate optimal width of container so that we can centre on page
		var newWidth = Math.floor(viewWidth / caseWidth) * caseWidth;
		// perform resize
		$casesAll.css("width", newWidth);
	}
	
	// get video that is compatible with browser
	var isVideoCapable;
	var elem = document.createElement('video');
	isVideoCapable = !!elem['canPlayType'];
	
	if (isVideoCapable){  
		isVideoCapable      = new Boolean(isVideoCapable);  
		isVideoCapable.ogg  = elem['canPlayType']('video/ogg; codecs="theora"');
		isVideoCapable.h264 = elem['canPlayType']('video/mp4; codecs="avc1.42E01E"');
		isVideoCapable.webm = elem['canPlayType']('video/webm; codecs="vp8, vorbis"');
	}
	
	if(!isVideoCapable)
	$("#videoPlayer").flowplayer({src:"flowplayer/flowplayer-3.2.5.swf", width:"580", height:"325"});	

	var getVideoSrc = function(data) {
		// determine appropriate video format
		if(isVideoCapable) {
			var videoKey
			
			if(isVideoCapable.h264)
			videoKey = "mp4"
			else
			videoKey = "ogg"
						
			if(data.video[videoKey] != "")
				return videoFolder + data.video[videoKey];
			else
				return ""
		} else {
			if(data.video["mp4"] != "")
				return videoFolder + data.video["mp4"];
			else
				return ""
		}
	};

	// SINGLE CASE HANDLING
	function getCase(whichCase) {
		
		// get current case index within grid
		var caseIndex = $casesAll.find(">div").index(whichCase);
		// get case data for current case, based on index
		var data = (caseIndex >= caseInfo.length) ? caseInfo[0] : caseInfo[caseIndex];
		caseData = data;
		
		_gaq.push(['_trackPageview', language + "/case/" + data.headline]);	
		
		// display case data
		$singleCase
			.find("h1").text(data.headline).end()
			.find("#case-client").text(data.client).end()
			.find("#case-url").attr('href', data.url || '').end()
			.find("#case-url").text((data.urltext || data.url || '')).end()
			.find("#case-description").html(data.description).end()
			.find("#case-video-wrap").css('backround-image', data.poster ? posterFolder + data.poster : posterFolder + 'default.jpg').end()
			.find("#case-contact-name").text(data.contact && data.contact.name || defaultContactName).end()
			.find("#case-contact-email").text(data.contact && data.contact.email || defaultContactEmail).end()
			.find("#case-contact-phone").text(data.contact && data.contact.phone || defaultContactPhone).end()
		;
		
		if(data.url)
		$singleCase.find("#case-url").append(" »")

		// gallery
		var s = "";
		if (data.gallery && data.gallery.length) {
			
			if(language == "en")
			s = "<h2>Gallery</h2>";
			else
			s = "<h2>Galleri</h2>";
			
			if(data.video.mp4 != "")
			s += '<img class="case-gallery-thumb" onClick="cases.loadVideo(\''+ (getVideoSrc(data)) +'\',\'' + posterFolder + data.poster + '\')" src="' + videoThumbFolder + data.poster + '">'
			
			for (var i=0, g=data.gallery; i<g.length; i++) {
				s += '<img class="case-gallery-thumb" onClick="cases.loadGalleryImg(\''+ (galleryFolder + g[i].src) +'\')" src="' + galleryThumbFolder + g[i].thumb + '">'
			}
		}
		$gallery.html(s);

		// update cufon fonts
		Cufon.replace('#case-headline, #case-gallery h2');
		Cufon.replace('#case-footer h3');
		
		// init scroller
		isIpadComp && caseSingleScroller.refresh();
		
		// animate single case into view
		caseIn();
		
	}
	
	// init case animations
	if (isWebkitComp) {
		var tranf = window.getComputedStyle($theCase[0]).webkitTransform
		
		if(tranf != "none")		
		var caseMatrix = new WebKitCSSMatrix(tranf)	
		else 
		var caseMatrix = new WebKitCSSMatrix()	
	}

	function loadVideo(vidsrc, poster){
		if (isVideoCapable && currSrc  !== vidsrc) {	
			$("#case-gallery-img").empty()
			currSrc = vidsrc	
			$(".video-js-box").empty()
			$(".video-js-box").append('<video id="case-video-player" class="video-js" width="580" height="327" poster="' + poster + '"preload controls>')
			$video = $("#case-video-player");
			
			if(isVideoCapable.h264)				
			$video.append('<source src="' + vidsrc +'" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\'>');
			else if(isVideoCapable.webm)
			$video.append('<source src="' + vidsrc + ' " type=\'video/webm; codecs="vp8, vorbis"\'>');
			else if(isVideoCapable.ogg)
			$video.append('<source src="' + vidsrc + '" type=\'video/ogg; codecs="theora, vorbis"\'>');			
			$videoPlayer = VideoJS.setup()			
		} else {
			if(!isVideoCapable) {
				$("#case-gallery-img").empty()				
				var playerObj =  {
					clip: {		
						//autoPlay: false,
						//autoBuffering: true,
						//baseUrl: 'http://blip.tv/file/get/'
					},
					playlist:[	
						poster,
						{
							url: vidsrc,
							autoPlay:false,
							autoBuffering:true
						}
						
					],
					onFinish: function()
					{ 
						$f().getPlugin("play").hide();
					}
				}		
				$("#videoPlayer").flowplayer({src:"/_site/flowplayer/flowplayer-3.2.5.swf", width:"580", height:"325"}, playerObj);
			}
		}

	}
	this.loadVideo = loadVideo;

	function loadGalleryImg(imgSrc) {	
		currSrc = ""
		$(".video-js-box").empty()	
		$("#case-gallery-img").empty()
		
		galleryImg = new Image()
		galleryImg.width = 580;
		galleryImg.height = 325;
	
		$(galleryImg).load(function(){
			$(this).hide()			
			$("#case-gallery-img").append(this)
			$(this).fadeIn()					
		}).attr('src', imgSrc);
	}
	this.loadGalleryImg = loadGalleryImg;
		
	function caseIn() {
		
		resizeCasesContainer()
		
		// animate
		if(isWebkitComp) {
			$theCase.css({display: "block", top:"0px"});					
			$theCase[0].style.webkitTransform = caseMatrix.translate(0, $docHeight)

			setTimeout(function(){
				$theCase[0].addEventListener( 'webkitTransitionEnd', caseIsIn, false ); 
				$theCase[0].style.webkitTransitionProperty = "all";
				$theCase[0].style.webkitTransitionDuration = ".5s";
				$theCase[0].style.webkitTransitionTiming = "ease-out";
				$theCase[0].style.webkitTransform = caseMatrix.translate(0,  - caseMatrix.f)
			},1)

		} else {
			$theCase.css({display: "block"});
			$theCase.css({top: $docHeight + "px"});
			$theCase.animate({top: 0}, 700, caseIsIn);
		}

	}
	
	var vidPl
	function caseOut() {
		//pause video (if possible)
		if($video) {
			isVideoCapable && $video[0].pause();
			
			if(!isIpadComp)
			$videoPlayer[0].fullscreenOff()
		}
		
		currSrc = ""
		$(".video-js-box").empty()	
		$("#case-gallery-img").empty()
		
		// animation
		if(isWebkitComp) {
			$theCase.css({display: "block", top:"0px"});					
			$theCase[0].addEventListener( 'webkitTransitionEnd', caseCloseDone , false ); 
			$theCase[0].style.webkitTransform = caseMatrix.translate(0, $docHeight);
		} else {
			$theCase.animate({top: $(window).height()}, 600, 'easeOutQuad', function() {$theCase.css('top', '100%')});
		}
	}
	
	function caseIsIn()
	{
		if(isWebkitComp)
		$theCase[0].removeEventListener( 'webkitTransitionEnd', caseIsIn, false ); 
		var videoSrc = getVideoSrc(caseData);		

		if (videoSrc && videoSrc != "") {
			loadVideo(videoSrc, (posterFolder + caseData.poster))			
		} else {			
			g = caseData.gallery
			loadGalleryImg(galleryFolder + g[0].src)
		}
	}
	
	function caseCloseDone()
	{
		$theCase[0].removeEventListener( 'webkitTransitionEnd', caseCloseDone , false ); 
		$theCase[0].style.webkitTransitionProperty = "";
		$theCase[0].style.webkitTransitionDuration = "0";
		$theCase.css("display", "none")
	}
	// event handlers
	$(window).resize(function() {
		resizeCasesContainer();
		fixCss();
	});
	
	$("#case-close").click(function(event) {caseOut();});
	
	// event delegation for all case cards
	function onCardClick(event) {
		var target = event.target || event.srcElement;
		var cardTarget = $(target).closest('div[caseid]');  
		cardTarget.length && getCase(cardTarget);
	}

	$casesAll[0].addEventListener ? $casesAll[0].addEventListener("click", onCardClick, false) : $casesAll[0].attachEvent("onclick", onCardClick);
	
	// generate case cards
	generateCaseCards(); 
	
	// init scroller for cases
	var caseScroller, caseSingleScroller;
	isIpadComp && (function() {
		var initScrollers = function() {
			caseScroller = new iScroll($casesAll[0]);
			caseSingleScroller = new iScroll($singleCase[0]);
		}
		
		var newScript = document.createElement('script');
		newScript.type = 'text/javascript';
		newScript.onload=initScrollers;
		newScript.src = '/_site/js/iscroll/iscroll.js';
		document.getElementsByTagName("head")[0].appendChild(newScript);
	})();
	
	// automatically adjust container's width on pageload
	resizeCasesContainer();
	
	// adjust container for overflow scrolls (used when !isIpadComp)
	fixCss();
	
	// init cufon
	Cufon.replace("#cases-close, #case-close, #caseAllScroller>div>h2");
	
	function filterProjects(client) {
		var cases = $("div[caseid]").show();
		client != 'Visa alla' && cases.filter('[client!=' + client + ']').hide();
	}
	
	// custom selectbox functionality
	// should be placed in plugin
	$(".select-title").live('click', function() {
		var box = $(this).parent('.select-box');
		var ul = box.find('ul');
		
		if (ul.attr('open') === 'yes') {
			
			//box.css("display", "none")
			// this could be improved by using matrix animation for webkit
			ul.animate({marginTop: -ul.outerHeight() -40}, 200, 'easeInSine', hideSelectchildren)
			ul.attr('open', 'no');
			
			$("#case-select-clients").css({
				'-webkit-border-radius': 20,
				'-moz-border-radius': 20,
				'-border-radius': 20
			});
			
		} else {
			
			box.addClass("select-box-visible");
			// this could be improved by using matrix animation for webkit
			ul.animate({marginTop: -ul.outerHeight()}, 0, '', function() {
				ul.animate({marginTop: -($("#case-select-clients .select-title").outerHeight()/2)}, 400, 'easeOutBack');
				ul.attr('open', 'yes')
			});
			$("#case-select-clients").css({
				'-webkit-border-radius': '20px 20px 10px 10px',
				'-moz-border-radius': '20px 20px 10px 10px',
				'-border-radius': '20px 20px 10px 10px'
			});
		}

	});
	
	$(".select-box li").live('click', function() {
		
		var ul = $(this).parent('ul');
		var client = $(this).text();
		
		// update select box title
		var title = $(".select-title", "#case-select-clients").html(client + '<div class="select-icon"></div>');
		ul.attr('open', 'no');
		
		filterProjects(client);	// this must come before the animation in ie. Weird bug..
		
		// close dropdown
		// this could be improved by using matrix animation for webkit
		ul.animate({marginTop: -ul.outerHeight()-40}, 200, 'easeInSine', hideSelectchildren).attr('open', 'no');
			
		$("#case-select-clients").css({
			'-webkit-border-radius': 20,
			'-moz-border-radius': 20,
			'-border-radius': 20
		});
			
		isIpadComp && caseScroller.refresh();
		
		//event.cancelBubble = true;
	});
	
	hideSelectchildren = function() {
		$('.select-box').removeClass("select-box-visible");
	}
	
	this.showCase = function(caseid) {
		showcaseOpen();
		var x = function() {
			getCase( $("div[caseid=case" + caseid + "]") );
		}
		setTimeout(x, 300);
	}
	
	var theHash = parseHash();
	if (theHash.isShowreel) {
		
		if (theHash.client && !theHash.project) {
			filterProjects(theHash.client);	
		}
		
		if (theHash.project) {
			if (isNaN(theHash.project)) {
				// find project based on projectname
				var projectid;
				for (var i=caseInfo.length-1; i>-1; i--) {
					var isClient = theHash.client == caseInfo[i].client;
					var isProject = isClient && (theHash.project == caseInfo[i].headline || theHash.project == caseInfo[i].hash);
					if (isProject) {
						theHash.project = caseInfo[i].id;
						break;
					}
				}
			}
			getCase($("div[caseid=case" + theHash.project + "]"));
		}
		showcaseOpen();
	}
	
	return this;
};

var cases;
function initCases() {	
	var dataUrl
	if(lang == "en")
	dataUrl = "/_site/content/cases/cases.data.en.js"
	else
	dataUrl = "_site/content/cases/cases.data.js"
	
	// load template for single cases, then init cases class
	$("#caseSingleScroller").load('/_site/case/single-case.htm?' + new Date().getTime(), function() {		
		// load data, then init cases
		$.get(dataUrl, '', function(data) {
			cases = new Cases(eval(data), lang);
		});
																	 
	});
};