// defines a custom loading animation for the flowplayer-overlay effect
jQuery.tools.overlay.addEffect("popOut", function(css, done) {
	// getConf returns the whole defined object for the overlay
	var conf = this.getConf();
	
	// getOverly returns the jquery-object defined in the rel-attribute
	// of calling element
	var target = this.getOverlay();
	
	// per default the blogEntry-divs css-display is 'none',
	// so set it to block when showing
	target.css('display', 'block');
	if (typeof conf.onFinish != 'undefined') {
		target.animate(conf.css, conf.speed, conf.onFinish);
	}else{
		target.animate(conf.css, conf.speed);
	}
	
	/* closing animation */
	}, function(done) {
		var conf = this.getConf();
		var target = this.getOverlay();	
		target.hide();
		done.call();
	}
);


/**
  * Function to create the popuOut effect of the blogpost-divs on the startpage of the blog 
  */
var createPopOutEffect = function() {

	// array of all blogEntry-div positions (before transformation)
	// it is used to position the elements again after hiding them
	var positions = new Array();
	
	// get the position of the sidecontainer to use it later
	// to let the blogentry-divs pop out from this position
	var originContainer = jQuery('.sideContainer:first');
	
	// top start position of the blogentries where the divs should pop out 
	var top = jQuery(window).height() - jQuery('#content').offset().top - 100;
	
	var hidden = jQuery('<div>').addClass('hidden').css('display', 'none');
	
	// collect the positions of the blogEntry-divs
	jQuery('div.blogEntry').each(function(i) {
		// the jquery object of the blogentry
		var blogEntry = jQuery(this);
		
		// get the relative position of the divs
		// IMPORTANT, the parent container MUST be position: relative
		// (in this case the #content-div)
		var pos = blogEntry.position();
		
		// add the position to the positions array
		positions.push([pos.left, pos.top]);
		
		// alter the css-properties of the blogentry
		blogEntry.css('opacity', '0');
		blogEntry.css('left', '-200px');
		blogEntry.css('top', top + 'px');
		
		// create an helper-button which will trigger the overlay-effect
		var element = jQuery('<button>');
		element.attr('rel', 'div.blogEntry:eq(' + i + ')');
		element.css('display', 'none');
		
		// append the buttons to the 'hidden' container
		hidden.append(element);
	});
	
	// append the hidden container to the end of the body
	jQuery('body').append(hidden);
	
	
	// after the orignal positions of the divs are now known and stored, 
	// the containers could now be hidden and set to position absolute 
	jQuery('div.blogEntry').css('display', 'none').css('position', 'absolute');
	
	// the containers are hidden, now show them again by calling the overlay-method
	// for the above created buttons
	jQuery('button[rel]').each(function(i) {
		jQuery(this).overlay({
			oneInstance: false,	// enable more than one open overlay
			closeOnClick: false,	// disable closing per click
			closeOnEsc: false,	// disable clsing with esc-key
			
			effect: 'popOut',		//set the custom-effect

			// css is a special implementation for the 'popOut' effect
			css : {
				left: positions[i][0],
				top: positions[i][1],
				opacity: 1
			},
			
			speed: 750,		// duration for the effect
			load: true		// trigger the overlay immediately
		});
	});
	
	// per default the overlay creates an closing-div within the blogentry
	// so remove it, otherwise the hover-effect will look crappy (closing div 
	// has the class 'close')
	jQuery('.blogEntry').each(function(){
		jQuery('.close', this).remove();
	});
};

/**
  * this function modifies the page-layout of the blog-detail page, it hides the comments,
  * add listener to several links, etc ... 
  */
var modifyBlogDetail = function() {
	/* different jQuery-selectors */
	// the close icon which is will be hided
	var closeIconSel = '#blogEntryFull .closeIcon';
	
	// the div where the blog-post-content is
	var blogPostSel = '#blogPost';
	
	// the div where the whole comments are displayed
	var commentsSel = '#comments';
	
	var commentCountLinkSel = '#commentCount a';
	
	var commentLabelSel = "#blogPost a.commentLink";
	
	// backLink to close the comments-view
	var backLinkSel = '#comments a.backLink';
	
	
	/* START TRANSFORMING */
	// the blogPost-div object to retrieve the width, etc. of the container
	var blogPost = jQuery(blogPostSel);
	
	// calculate the relative position of the commentCount link to position the comments-div exactly on this 
	// position
	var commentCountLinkPosition = jQuery(commentCountLinkSel).offset(); 
	var mainContainerPosition = jQuery('.mainContainer').offset();
	if (commentCountLinkPosition) {
		var pos = {
			left: commentCountLinkPosition.left - mainContainerPosition.left,
			top: commentCountLinkPosition.top - mainContainerPosition.top
		};
	} else {
		var pos = {
			left: mainContainerPosition.left,
			top: mainContainerPosition.top
		};	
	}
	
	// remember the original height of the comments-box to let it grow later
	var originalCommentHeight = jQuery(commentsSel).height();
	
	// prepare the comments-div
	jQuery(commentsSel).css({
		position: 'absolute',
		left: pos.left,
		top: pos.top,
		height: 0,
		width: 0,
		opacity: 0
	}).hide();
	
	// hide the close-icon
	jQuery(closeIconSel).hide();
	
	// attach the overlay event to the comment-count link
	jQuery(commentCountLinkSel).attr('rel', commentsSel);
	jQuery(commentCountLinkSel).overlay({
			oneInstance: false,	// enable more than one open overlay
			closeOnClick: true,	// disable closing per click
			closeOnEsc: true,	// disable closing with esc-key
			
			effect: 'popOut',		//set the custom-effect

			// css is a special implementation for the 'popOut' effect
			css : {
				opacity: 1,
				width: blogPost.width(),
				height: originalCommentHeight,
				left: 0,
				top: 0,
				'font-size:': '1em'
			},
			
			onFinish: function() {
				jQuery('#blogPost').hide();
				jQuery('#comments').css('position', 'relative');
				jQuery('#comments').css('height', 'auto');
				jQuery('#blogEntryFull .closeIcon').show();
				
				//changed by kms
				//jQuery(".newCommentContainer input:visible").eq(0).focus();
			},
			
			speed: 500	// duration for the effect
	});
	
	jQuery(commentsSel).height('auto');
	
	// attach the close event
	jQuery(backLinkSel).live("click", function() {
		jQuery("#blogPost").show();
		jQuery(commentCountLinkSel).data("overlay").close();
	});
	jQuery(commentLabelSel).live("click", function() {
		jQuery(commentCountLinkSel).data("overlay").load();
	});
};