$(document).ready(function() {

	var body = $('body');
	var slider = $('#slide');

	// is IE8 or lower?
	if ($.browser.msie == true && parseInt($.browser.version) <= 8) {
		var isIE8 = true;
	}
	else {
		var isIE8 = false;
	}
	// movable cloud
	var sortableCloud = $('#sortableCloud');
	var cloud = $('#cloud');
	var cloudPlaceholder = $('#cloudPlaceholder');
	cloudPlaceholder.css('opacity', '0'); // hide placeholder
	// fade in/out animation
	function animateCloud() {
		cloud.animate({opacity: 0.6}, 3000).animate({opacity: 1}, 3000, function() { animateCloud();});
	}
	if (!isIE8) { animateCloud(); }
	// receiving container
	cloudPlaceholder.sortable({
		receive: function(event, ui) {
			// hide slider
			slider.css('opacity', '0');
			// prepend and show cloud box
			$('#content_main').prepend('<div id="cloudBox"><div class="clearfix"><div class="caption"><h2 style="font-weight:normal;">T’agrada fixar-te en els petits detalls?</h2><h3 style="margin-bottom:.25em;">A nosaltres també!</h3><p>A Can Antaviana ens esforcem per ser <strong>artesans digitals</strong>. L’obsessió per la qualitat i la feina ben feta és al nostre ADN i impregna <a href="/que-fem/index.html">tot allò que fem</a>. </p></div><div class="glass"></div><div id="cloudBoxClose"><a href="#">Tancar</a></div></div></div>');
			var cloudBox = $('#cloudBox');
			var closeButton = cloudBox.find('#cloudBoxClose');
			cloudBox.find('div.caption').hide().fadeIn('slow');
			if (!isIE8) { cloudBox.find('div.glass').hide().fadeIn('slow'); }
			closeButton.hide().fadeIn('slow');
			// closing the cloud box...
			closeButton.click(function() {
				// remove box
				cloudBox.animate({ opacity: '0' }).remove();
				// remove cloud, create a new one and reassign var
				cloud.remove();
				sortableCloud.append('<img src="' + urlBase + '/media/img/cloud.png" alt="" id="cloud" />');
				cloud = sortableCloud.find('#cloud');
				if (!isIE8) {
					cloud.css('opacity', '0').animate({ opacity: '1' });
					animateCloud();
				}
				// show and resume slider
				slider.animate({ opacity: '1' });
				slider.cycle('resume');
				// analytics track event
				_gaq.push(['_trackEvent', 'Nuvol', 'Click', 'Tancar núvol']);
				//return false;
			})
			$('#cloudOverlay').animate({ opacity: '0' }).remove();
			if (!isIE8) {
				cloudPlaceholder.animate({ opacity: '0' });
				animateCloud();
			}
			else { cloudPlaceholder.css('opacity', '0'); }
			cloudPlaceholder.css('z-index', '1');
		},
		dropOnEmpty: true
	});
	// make movable
	sortableCloud.sortable({
		start: function(event, ui) {
			// pause slider
			slider.cycle('pause');
			// preload cloudBox images
			var cloudBox = $('<img />').attr('src', urlBase + '/media/css/img/cloud-box.jpg');
			var glass = $('<img />').attr('src', urlBase + '/media/css/img/cloud-box-glass.png');
			// make cloud fully visible
			cloud.fadeIn().stop(true);
			// add overlay with fade in effecct
			body.prepend('<div id="cloudOverlay"></div>');
			$('#cloudOverlay').css('opacity', '0').animate({ opacity: '0.6' });
			// show cloud placeholder
			cloudPlaceholder.css('z-index', '99998');
			if (!isIE8) { cloudPlaceholder.css('opacity', '0').animate({ opacity: '1' }); }
			else { cloudPlaceholder.css('opacity', '1'); }
		},
		stop: function(event, ui) {
			// remove overlay
			$('#cloudOverlay').animate({ opacity: '0' }).remove();
			// remove cloud placeholder
			if (!isIE8) {
				cloudPlaceholder.animate({ opacity: '0' });
				animateCloud();
			}
			else { cloudPlaceholder.css('opacity', '0'); }
			cloudPlaceholder.css('z-index', '1');
			// resume slider
			slider.cycle('resume');
		},
		connectWith: '#cloudPlaceholder',
		tolerance: 'pointer',
		dropOnEmpty: true,
		cursor: 'move',
		opacity: 1,
		revert: 400,
		placeholder: 'cloudPlaceholder',
		helper: 'cloudHelper',
		forcePlaceholderSize: true,
		forceHelperSize: true,
		scroll: false,
		zIndex: 999999
	});

	// scrollable
	var scrollable = body.find('#scrollable');
	scrollable.each(function() {
		var t = $(this);
		var items = t.children('div.items');
		var itemsList = items.children('ul');
		var boxes = itemsList.children('li');
		var boxesMaxHeight = 0;
		// add navigation buttons
		t.before('<a class="prev browse left" id="scrollablePrev"></a>');
		t.after('<a class="next browse right" id="scrollableNext"></a>');
		var pButton = body.find('#scrollablePrev');
		var nButton = body.find('#scrollableNext');
		pButton.addClass('disabled');
		// prepare
		var boxesCount = boxes.length;
		var boxesWidth = boxes.first().outerWidth(true);
		var curPos = 0;
		var curMargin = 0;
		// sliding
		pButton.click(function() {
			if (curPos > 0) {
				curMargin = curMargin - boxesWidth;
				itemsList.animate({'marginLeft': '-' + curMargin + 'px'});
				curPos--;
				nButton.removeClass('disabled');
			}
			if (curPos == 0) {
				pButton.addClass('disabled');
			}
			return false;
		});
		nButton.click(function() {
			if (curPos < (boxes.length - 4)) {
				curMargin = curMargin + boxesWidth;
				itemsList.animate({'marginLeft': '-' + curMargin + 'px'});
				curPos++;
				pButton.removeClass('disabled');
			}
			if (curPos == (boxes.length - 4)) {
				nButton.addClass('disabled');
			}
			return false;
		});
		// boxes treatment
		boxes.each(function() {
			var u = $(this);
			var lnk = u.find('h2').children('a');
			u.hover(
				function() {
					u.addClass('hover');
				},
				function() {
					u.removeClass('hover');
				}
			);
			var dest = lnk.attr('href');
			u.click(function() {
				window.location = dest;
			});
			var h = u.height();
			if (h > boxesMaxHeight) { boxesMaxHeight = h; }
		});
		boxes.css({ 'min-height': (boxesMaxHeight) });
	});

});