var $jq = jQuery.noConflict();
var $d;

$jq(document).ready(function() {
	
	$d = new $dandy('$d');
	
})

var $dandy = function(instanceVariableName) {

	this.instanceVariableName = instanceVariableName;
	this.currentProject = null;
	this.currentProjectIndex = 0;
	this.currentImageIndex = 0;
	this.maxImageIndex = 0;

	this.init = function() {
		
		this.loadRightColumnContent('about us');
		this.showProject($FIRST_PROJECT_ID);
		
	}
	
	this.loadRightColumnContent = function(pageTitle) {
		
		$jq('#right-column-dynamic-content').html('Loading...');
		if($jq('#right-column-links .link-selected'))
			$jq('#right-column-links .link-selected').removeClass('link-selected');
		this.getWpPostContent(pageTitle, this.updateRightColumnContent);
		$jq('#right-column-link-' + pageTitle.replace(' ', '_')).addClass('link-selected');
		
	}
	
	this.getWpPostContent = function(pageTitle, successCallback) {
		
		$jq.ajax({
			url: "/wp-content/themes/dandy/get-wp-post-content.php",
			data: {post_title: pageTitle},
			type: "GET",
			success: successCallback
		});
		
	}
	
	this.updateRightColumnContent = function(data) {
		
		data = data.replace('<form', '<form onsubmit="return onInquiresFormSubmit()"');
		
		$jq('#right-column-dynamic-content').html(data);
		
	}
	
	this.showProject = function(projectId) {
		
		for(var i = 0; i < $PROJECTS_JSON.length; i++) {
			if($PROJECTS_JSON[i].ID == projectId) {
				
				// This is the project we want to show
				this.currentProject = $PROJECTS_JSON[i];
				
				this.maxImageIndex = 0;
				this.currentProjectIndex = i;
				this.currentImageIndex = 0;
				
				// First, let's load the first image in the project attachments (if it's available)
				$jq("#project-image-container").html("Loading...");
				$jq('#project-image-container').unbind('mouseenter mouseleave');
				$jq("#project-nav-left").empty();
				$jq("#project-nav-right").empty();
				$jq("#project-description-container").empty();
				if(this.currentProject.project_attachments != null && this.currentProject.project_attachments.length > 0) {
					
					$jq("#project-nav-container").removeClass("hide");
					//$jq("#project-image-container").addClass("image");
					//$jq("#project-image-container").bind('click', nextImage);
					
					this.maxImageIndex = this.currentProject.project_attachments.length - 1;
					for(var ii = 0; ii < this.currentProject.project_attachments.length; ii++) {
						$jq("#project-nav-left").append('<span><a id="image-link-' + ii + '" href="javascript:' + this.instanceVariableName + '.updateCurrentProjectImage(' + ii + ');">' + (ii + 1) + '</a></span>');
					}
					if(this.currentProject.url != null) {
						$jq("#project-nav-left").append('<span>|</span><span><a href="' + this.currentProject.url + '" target="_blank">official site</a></span>');	
					} else {
						$jq("#project-nav-left").append('<span>|</span><span>official site coming soon</span>');
					}
					this.updateCurrentProjectImage(this.currentImageIndex);
					
					$jq("#project-nav-right").append('<span><a href="javascript:' + this.instanceVariableName + '.previousImage();">back</a></span>');
					$jq("#project-nav-right").append('<span>|</span>');
					$jq("#project-nav-right").append('<span><a href="javascript:' + this.instanceVariableName + '.nextImage();">next</a></span>');
					
					// Now the description
					$jq("#project-description-container").html(this.currentProject.post_content.replace(/\r\n/g, '<br/>'));
					
				} else {
					
					// Now the description
					$jq("#project-nav-container").addClass("hide");
					//$jq("#project-image-container").removeClass("image");
					//$jq("#project-image-container").unbind('click', nextImage);
					
					$jq("#project-image-container").html('<p class="floating-text">' + this.currentProject.post_content.replace(/\r\n/g, '<br/>') + '</p>');
					
				}

				
				if($jq("#projects-list .link-selected"))
					$jq("#projects-list .link-selected").removeClass('link-selected');
				$jq("#project-link-" + projectId).addClass('link-selected');
				
			}
		}
		
	}
	
	this.updateCurrentProjectImage = function(index) {
		
		if($jq("#project-nav-left .link-selected"))
			$jq("#project-nav-left .link-selected").removeClass('link-selected');
		$jq("#image-link-" + index).addClass('link-selected');
		$jq("#project-image-container").empty();
		
		var html = '';
		
		if(this.currentProject.project_attachments[index].mime.indexOf('image') >= 0) {
			html = '<img src="' + this.currentProject.project_attachments[index].location + '" alt="' + this.currentProject.project_attachments[index].caption + '"/>';
		} else if(this.currentProject.project_attachments[index].mime.toLowerCase() == "video/quicktime") {
			
			
			html = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="491" height="405">' +
  				    	'<param name="src" value="' + this.currentProject.project_attachments[index].location + '" />' +
  						'<param name="controller" value="true" />' +
  						'<param name="autoplay" value="false" />' +
						'<param name="scale" value="aspect" />' +
  						'<!--[if !IE]>-->' +
  						'<object type="video/quicktime" data="' + this.currentProject.project_attachments[index].location + '" width="491" height="405">' +
							'<param name="autoplay" value="false" />' +
							'<param name="controller" value="true" />' +
							'<param name="scale" value="aspect" />' +
  						'</object>' +
  						'<!--<![endif]-->' +
					'</object>';
					
			$jq("#project-image-container").unbind('click', nextImage);	
		}
		
		html += '<div class="caption"><div class="caption-content">' + this.currentProject.project_attachments[index].caption + '</div></div>';
		$jq("#project-image-container").append(html);
		
		/*setTimeout(
			function() {
				$jq('#project-image-container .caption').each(function() {
					//...set the opacity to 0...
					$jq(this).css('opacity', 0);
					//..set width same as the image...
					$jq(this).css('width', $jq(this).siblings('img').width());
					//...get the parent (the wrapper) and set it's width same as the image width... '
					$jq(this).parent().css('width', $jq(this).siblings('img').width());
					//...set the display to block
					$jq(this).css('display', 'block');
				});
			
				$jq('#project-image-container').hover(function(){
					//when mouse hover over the wrapper div
					//get it's children elements with class descriptio
					//and show it using fadeTo
					$jq(this).children('.caption').stop().fadeTo(500, 0.7);
				},function(){
					//when mouse out of the wrapper div
					//use fadeTo to hide the div
					$jq(this).children('.caption').stop().fadeTo(500, 0);
				});

			},
			500
		);*/
		
	}
	
	this.previousImage = function() {
		if(this.currentImageIndex == 0) {
			// At the first image, go to the previous project, or if at the first project, go to the last
			if(this.currentProjectIndex == 0) {
				this.showProject($PROJECT_IDS[$PROJECT_IDS.length - 1]);
			} else {
				this.showProject($PROJECT_IDS[this.currentProjectIndex - 1]);
			}
			return;
		} else {
			this.currentImageIndex--;
		}
		this.updateCurrentProjectImage(this.currentImageIndex);
	}
	
	this.nextImage = function() {
		if((this.currentImageIndex + 1) <= this.maxImageIndex) {
			this.currentImageIndex++;
		} else {
			// Already at the last image, let's go to the next project, or if at the last go to the first project
			if(this.currentProjectIndex == ($PROJECT_IDS.length - 1)) {
				this.showProject($PROJECT_IDS[0]);
			} else {
				this.showProject($PROJECT_IDS[this.currentProjectIndex + 1]);	
			}
			return;
		}
		this.updateCurrentProjectImage(this.currentImageIndex);
	}
	
	this.init();
	
}

function onInquiresFormSubmit() {
	
	var dataElements = $jq('.wpcf7-form').find('*[name]');
	var data = {};
	var testString = "";
	for(var i = 0; i < dataElements.length; i++) {
		testString += $jq(dataElements[i]).attr('name') + "=" + $jq(dataElements[i]).attr('value') + "\n";
		data[$jq(dataElements[i]).attr('name')] = $jq(dataElements[i]).attr('value');
	}
	
	$jq.post('/?testing&page_id=24', data, $d.updateRightColumnContent);
	
	return false;

}

function nextImage() {
	$d.nextImage();
}