/* 
 * Suckerfish Menus
*/

sfHover = function() {
	var sfEls = document.getElementById("nav_611603").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);



/*
 *QuickSand
 */
 (function($) {
	$.fn.sorted = function(customOptions) {
		var options = {
			reversed: false,
			by: function(a) {
				return a.text();
			}
		};
		$.extend(options, customOptions);
	
		$data = $(this);
		arr = $data.get();
		arr.sort(function(a, b) {
			
			var valA = options.by($(a));
			var valB = options.by($(b));
			if (options.reversed) {
				return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;				
			} else {		
				return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;	
			}
		});
		return $(arr);
	};

})(jQuery);

$(function() {
  
  var read_button = function(class_names) {
	var r = {
	  selected: false,
	  type: 0
	};
	for (var i=0; i < class_names.length; i++) {
	  if (class_names[i].indexOf('selected-') == 0) {
		r.selected = true;
	  }
	  if (class_names[i].indexOf('segment-') == 0) {
		r.segment = class_names[i].split('-')[1];
	  }
	};
	return r;
  };
  
  var determine_sort = function($buttons) {
	var $selected = $buttons.parent().filter('[class*="selected-"]');
	return $selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($buttons) {
	var $selected = $buttons.parent().filter('[class*="selected-"]');
	return $selected.find('a').attr('data-value');
  };
  
  var $preferences = {
	duration: 800,
	easing: 'easeInOutQuad',
	adjustHeight: false
  };
  
  var $list = $('#list');
  var $data = $list.clone();
  
  var $controls = $('ul.splitter ul');
  
  $controls.each(function(i) {
	
	var $control = $(this);
	var $buttons = $control.find('a');
	
	$buttons.bind('click', function(e) {
	  
	  var $button = $(this);
	  var $button_container = $button.parent();
	  var button_properties = read_button($button_container.attr('class').split(' '));      
	  var selected = button_properties.selected;
	  var button_segment = button_properties.segment;

	  if (!selected) {

		$buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2').removeClass('selected-3').removeClass('selected-4');
		$button_container.addClass('selected-' + button_segment);
		
		var sorting_type = determine_sort($controls.eq(1).find('a'));
		var sorting_kind = determine_kind($controls.eq(0).find('a'));
		
		if (sorting_kind == 'all') {
		  var $filtered_data = $data.find('li');
		} else {
		  var $filtered_data = $data.find('li.' + sorting_kind);
		}
		
		if (sorting_type == 'size') {
		  var $sorted_data = $filtered_data.sorted({
			by: function(v) {
			  return parseFloat($(v).find('span').text());
			}
		  });
		} else {
		  var $sorted_data = $filtered_data.sorted({
			by: function(v) {
			  return $(v).find('strong').text().toLowerCase();
			}
		  });
		}
		
		$list.quicksand($sorted_data, $preferences, twofold.prepWork);
		
	  }
	  
	  e.preventDefault();
	});
	
  }); 

  var high_performance = true;  
  var $performance_container = $('#performance-toggle');
  var $original_html = $performance_container.html();
  
  $performance_container.find('a').live('click', function(e) {
	if (high_performance) {
	  $preferences.useScaling = false;
	  $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
	  high_performance = false;
	} else {
	  $preferences.useScaling = true;
	  $performance_container.html($original_html);
	  high_performance = true;
	}
	e.preventDefault();
  });
});







$(function () {
  // IE6 doesn't handle the fade effect very well - so we'll stick with
  // the default non JavaScript version if that is the user's browser.
  if ($.browser.msie) return;// && $.browser.version < 7
  
  $('#navigation li')
  
	// remove the 'highlight' class from the li therefore stripping 
	// the :hover rule
	.removeClass('highlight')
	
	// within the context of the li element, find the a elements
	.find('a')
	
	// create our new span.hover and loop through anchor:
	.append('<span class="hover" />').each(function () {
	  
	  // cache a copy of the span, at the same time changing the opacity
	  // to zero in preparation of the page being loaded
	  var $span = $('> span.hover', this).css('opacity', 0);
	  
	  // when the user hovers in and out of the anchor
	  $(this).hover(function () {
		// on hover
		
		// stop any animations currently running, and fade to opacity: 1
		$(this).find('span.base').stop().fadeTo(300, 0);
		$span.stop().fadeTo(300, 1);
	  }, function () {
		// off hover
		
		// again, stop any animations currently running, and fade out
		$(this).find('span.base').stop().fadeTo(300, 1);
		$span.stop().fadeTo(300, 0);
	  });
	});
});















var map;
var brooklyn = new google.maps.LatLng(-27.533428, 152.99192);
function initializegmaps() {
  var stylez = [ { featureType: "landscape.man_made", elementType: "all", stylers: [ { hue: "#ff0000" }, { visibility: "on" }, { saturation: -100 }, { lightness: -92 } ] },{ featureType: "road", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#0019ff" }, { saturation: -100 }, { lightness: 40 } ] },{ featureType: "poi.park", elementType: "all", stylers: [ { hue: "#f6ff00" }, { visibility: "off" } ] },{ featureType: "water", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#0008ff" }, { saturation: -99 }, { lightness: -67 } ] },{ featureType: "road.local", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -40 }, { lightness: -51 } ] },{ featureType: "administrative.land_parcel", elementType: "all", stylers: [ { visibility: "on" }, { lightness: -79 } ] },{ featureType: "poi", elementType: "all", stylers: [ { visibility: "off" } ] } ];
  var mapOptions = {
	zoom: 16,
	center: brooklyn,
	disableDefaultUI: true,
	mapTypeControlOptions: {
	   mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'hiphop']
	}
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
	  mapOptions);
  var styledMapOptions = {
	  name: "Twofold"
  }
  var jayzMapType = new google.maps.StyledMapType(
	  stylez, styledMapOptions);
  map.mapTypes.set('hiphop', jayzMapType);
  map.setMapTypeId('hiphop');
  setMarkers(map, beaches);
}
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("/Images/mapIcons/marker_red.png",
	  // This marker is 20 pixels wide by 34 pixels tall.
	  new google.maps.Size(41, 47),
	  // The origin for this image is 0,0.
	  new google.maps.Point(0,0),
	  // The anchor for this image is at 9,34.
	  new google.maps.Point(20, 47));
function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
	  iconColor = "red"; 
   }
   if (!icons[iconColor]) {
	  icons[iconColor] = new google.maps.MarkerImage("/Images/mapIcons/marker_"+ iconColor +".png",
	  // This marker is 20 pixels wide by 34 pixels tall.
	  new google.maps.Size(20, 34),
	  // The origin for this image is 0,0.
	  new google.maps.Point(0,0),
	  // The anchor for this image is at 6,20.
	  new google.maps.Point(0, 34));
   } 
   return icons[iconColor];
}
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var iconImage = new google.maps.MarkerImage('/Images/mapIcons/marker_red.png',
	  // This marker is 20 pixels wide by 34 pixels tall.
	  new google.maps.Size(41, 47),
	  // The origin for this image is 0,0.
	  new google.maps.Point(0,0),
	  // The anchor for this image is at 9,34.
	  new google.maps.Point(0, 47));
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
	  // The shadow image is larger in the horizontal dimension
	  // while the position and offset are the same as for the main image.
	  new google.maps.Size(37, 34),
	  new google.maps.Point(0,0),
	  new google.maps.Point(9, 34));
	  // Shapes define the clickable region of the icon.
	  // The type defines an HTML &lt;area&gt; element 'poly' which
	  // traces out a polygon as a series of X,Y points. The final
	  // coordinate closes the poly by connecting to the first
	  // coordinate.
  var iconShape = {
	  coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
	  type: 'poly'
  };
var infowindow = new google.maps.InfoWindow(
  { 
	size: new google.maps.Size(150,50)
  });
function createMarker(map, latlng, label, html, color) {
	var contentString = '<div class="infowindow"><strong>'+label+'</strong><br>'+html+"</div>";
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		shadow: iconShadow,
		icon: getMarkerImage(color),
		shape: iconShape,
		title: label,
		zIndex: Math.round(latlng.lat()*-100000)<<5
		});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(contentString); 
		infowindow.open(map,marker);
		});
}
/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * o*/
var beaches = [
  ['Twofold', -27.533428, 152.99192, "red"]
];
function setMarkers(map, locations) {
  // Add markers to the map
  for (var i = 0; i < locations.length; i++) {
	var beach = locations[i];
	var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
	var marker = createMarker(map,myLatLng,beach[0],beach[0],beach[3]);
  }
}
















// Grayscale w canvas method
function grayscale(src){
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var imgObj = new Image();
	imgObj.src = src;
	canvas.width = imgObj.width;
	canvas.height = imgObj.height; 
	ctx.drawImage(imgObj, 0, 0); 
	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for(var y = 0; y < imgPixels.height; y++){
		for(var x = 0; x < imgPixels.width; x++){
			var i = (y * 4) * imgPixels.width + x * 4;
			var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
			imgPixels.data[i] = avg; 
			imgPixels.data[i + 1] = avg; 
			imgPixels.data[i + 2] = avg;
		}
	}
	ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	return canvas.toDataURL();
}



var twofold = {
  
  init : function() {
	twofold.prepNavigation();
	twofold.prepSliders();
	twofold.prepTooltips();
	twofold.prepScrollers();
	twofold.prepHand();
	twofold.prepWork();
	twofold.prepRounded();
//    initializegmaps();
  }
  
  ,prepNavigation : function() {
	$('#nav_611603 li').each(function() {
	  if (!$(this).hasClass('selected'))
		$(this).find('a').prepend('<span class="base"></span>');
	});
	
	//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 
	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("span.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; //Prevent the browser jump to the link anchor
	});
  }

  ,prepSliders : function() {
	$('#slider1 li:first .slider-text').css({ marginLeft: '480px' });
	$('#slider1').anythingSlider({
		startStopped    : false, // If autoPlay is on, this can force it to start stopped
			width           : 1920,   // Override the default CSS width
			height          : 1000,   // Override the default CSS width
			theme           : 'minimalist-round',
			buildArrows     : true,
			autoPlayLocked  : true,  // If true, user changing slides will not stop the slideshow
			resumeDelay     : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
			onSlideComplete : function(slider){
				// alert('Welcome to Slide #' + slider.currentPage);
			}
			,onSlideBegin : function(slider) {
			  var target_slide = $('li.activePage').next();
			  if ($('li.activePage').length == 0 || target_slide.length == 0) target_slide = $('#slider1 li:first').next().next();
			  var target_text = target_slide.find('.slider-text');
			  target_text.animate({
				marginLeft: '480px'
			  }, 1000, 'easeInOutExpo');
			}
			,onSlideComplete : function(slider) {
			  var target_slide = $('li.activePage').next();
			  target_slide.find('.slider-text').css({ marginLeft: '1280px' });
			}
		});
		$('#slider2').anythingSlider({
			width               : 546,   // if resizeContent is false, this is the default width if panel size is not defined
			height              : 512,   // if resizeContent is false, this is the default height if panel size is not defined
			resizeContents      : false,
			theme           : 'minimalist-round',
			buildArrows     : false,
			pauseOnHover    : true,      //
			autoPlayLocked  : true,  // If true, user changing slides will not stop the slideshow
			resumeDelay     : 17000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
			onSlideComplete : function(slider){
				// alert('Welcome to Slide #' + slider.currentPage);
			}
		});
		
		// External Link
		$("a.muppet").click(function(){
			$('#slider1').anythingSlider(5);
			$(document).scrollTop(0);
			return false;
		});
		// Report Events to console & features list
		$('#slider1').bind('before_initialize initialized swf_completed slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete', function(e, slider){
			// show object ID + event (e.g. "slider1: slide_begin")
			var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
			$('#status').text(txt);
			if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
		});
		// Add a slide
		var imageNumber = 1;
		$('button.add').click(function(){
			$('#slider1')
				.append('<li><img src="images/slide-tele-' + (++imageNumber%2 + 1)  + '.jpg" alt="" /></li>')
				.anythingSlider(); // update the slider
		});
		$('button.remove').click(function(){
			if ($('#slider1').data('AnythingSlider').pages > 1) {
				$('#slider1 > li:not(.cloned):last').remove();
				$('#slider1').anythingSlider(); // update the slider
			}
		});
  }
  
  ,prepTooltips : function() {
	$('a.tipsy-trigger').tipsy({
	  gravity: 's', 
	  offset: -48, 
	  fade: true
	});
  }
  
  ,prepScrollers : function() {
	$("#toTop").scrollToTop({speed:1000,ease:"easeInOutExpo",start:0});
	$('.work-splitter-top li:last a').click(function() {
	  $('html,body').animate({ scrollTop: '670' }, 500, 'easeInOutExpo');
	  return false;
	});
  }
  
  ,prepHand : function() {
	$('#iphone').hover(function() {
	  $(this).stop().animate({ width: "255px" }, 500, 'easeInOutExpo');
	}, function() {
	  $(this).stop().animate({ width: '54px' }, 800, 'easeInOutExpo');
	});
  }
  
  ,prepWork : function() {
	/*$(".image-grid li").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
		event.stopPropagation();
		$(this).find('strong').animate({ top: '0px' });
		$(this).find('span').animate({ top: '34px' });
	  } else {
		$(this).find('strong').animate({ top: '-60px' });
		$(this).find('span').animate({ top: '-34px' });
	  }
	});*/
	
	$('.image-grid li').hover(function() {
	  $(this).find('strong').animate({ top: '0px' });
	  $(this).find('span').animate({ top: '34px' });
	}, function() {
	  $(this).find('strong').animate({ top: '-60px' });
	  $(this).find('span').animate({ top: '-34px' });
	});
  }
  
  ,prepRounded : function() {
	
	var myBorder = RUZEE.ShadedBorder.create({ corner:25, shadow:0 });
	$(".rounded-splitter").each(function() {
	  myBorder.render($(this));
	})
	
	var myBorder1 = RUZEE.ShadedBorder.create({ corner:20, shadow:0 });
	$(".rounded-20, .rounded-comments").each(function() {
	  myBorder1.render($(this));
	})
	
	var myBorder2 = RUZEE.ShadedBorder.create({ corner:8, shadow:0 });
	$(".rounded-8, .pagination").each(function() {
	  myBorder2.render($(this));
	})

  }

}

$(document).ready(twofold.init);

// On window load. This waits until images have loaded which is essential
$(window).load(function() {
  if ($('body').hasClass('Contact')) initializegmaps();
  applesearch.init();
  
	// Fade in images so there isn't a color "pop" document load and then on window load
	$(".item img").fadeIn(300);
	// clone image
	$('.item img').each(function(){
		var el = $(this);
		el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
			var el = $(this);
			el.parent().css({"width":this.width,"height":this.height});
			el.dequeue();
		});
		this.src = grayscale(this.src);
	});
	// Fade image 
	$('.item img').mouseover(function(){
		$(this).parent().find('img:first').stop().animate({opacity:1}, 300);
	})
	$('.img_grayscale').mouseout(function(){
		$(this).stop().animate({opacity:0}, 1000);
	});
});