/*  ContentFlowData, version 1.0.2 
 *  (c) 2011 NOLTE&LAUTH GmbH
 *  <http://www.nolteundlauth.de />
 *
 *  ContentFlowData is distributed under the terms of the MIT license.
 *
 *--------------------------------------------------------------------------*/

/*

1 ContentFlowGlobal.init
  - add STYLESHEET
  - add ContentFlowAddon JAVASCRIPT

2 new ContentFlow
  - register at ContentFlowGlobal

(document can be ready now)

3 ContentFlowGlobal.onloadInit
  - ContentFlow.init
    - ContentFlow._init
      - ContentFlowAddon.init
        - add ContentFlowAddon STYLESHEET
      - ContentFlowAddon.afterContentFlowInit
  
*/

var ContentFlowData = {
    scriptName: 'flowdata.js',
    scriptElement:  null,
    initialized: false,
    imagecount: 0,
    loadcount: 0,
    maxheight: 0,
	init: function ()
	{
		if(ContentFlowGlobal)
		{
			$("#flowContainer").hide();
			$("#flowTabs").hide();
			if(!this.scriptName)
			{
				this.scriptName = "flowdata.js";
			}
			this.scriptElement = ContentFlowGlobal.getScriptElement(this.scriptName);
			var xml = this.scriptElement.getAttribute('load');
			var self = this;
			$.ajax({
			  url: xml,
			  dataType: 'xml',
			  success: function(result)
			  {
			    self._fill($(result.getElementsByTagName('data')));
			  }
			});
		}
	},
	_fill: function(content)
	{
		if(content!=null)
		{
			// Shortcuts
			var self = this;

			// Determine parent nodes and source data
			var headlines = $("#flowHeadlines");
			var tabs = $("#flowTabs").find("ul");
			var items = $("#contentFlow").find(".flow");
			var tiles = content.find("coverflow").find("tile");

			// Clean up
			headlines.children().remove();
			tabs.children().remove();
			items.children().remove();

			// Count images in tiles
			this.imagecount = tiles.find("image").length;

			// Fill html with xml content
			tiles.each(function()
			{
				// Get the content node
				var node = $(this);

				// Add a headline
				headlines.append($('<span>'+node.find("title").text()+'</span>'));

				// Add a tab button
				tabs.append($('<li><a href="#" title="'+node.find("button_label").text()+'">'+node.find("button_label").text()+'</a></li>'));

				// Add an item
				var img = $('<img src="'+node.find("image").text()+'" class="content" style="cursor:hand;"  />');
				var lnk = $('<a href="'+node.find("url").text()+'" target="'+node.find("url").attr("target")+'" class="link" title="START"><span>START</span></a>');
				var abstract = $('<div class="abstract">'+node.find("description").text()+'</div>');
				var box = $('<div class="description"></div>').append(lnk).append(abstract);
				items.append($('<div class="item"></div>').append(img).append(box));

				// Procede with done if all images are loaded
				img.load(function() { self._loaded(this); });
			});

			// Finish
			tabs.find("li").last().addClass("last-child");
		}
	},
	_loaded: function(img)
	{
		// Determine the images height
		var tmp = new Image();
    	tmp.src = (img.getAttribute ? img.getAttribute("src") : false) || img.src;
    	var height = tmp.height;

		// Determine max height as configuration for the flow
		var ref = height*1.27;
		if(ref>this.maxheight)
		{
			this.maxheight = ref;
		}

		// Increment load counter
		this.loadcount++;

		// End if all images are loaded
		if(this.loadcount>=this.imagecount)
		{
			this._done();
		}
	},
	_done: function ()
	{
		//console.log("ContentFlowData._done");
		//console.log(this.maxHeight);
		var cf = new ContentFlow('contentFlow', { maxItemHeight: this.maxheight });
		ContentFlowGlobal.onloadInit();
		$("#flowContainer").show();
		$("#flowTabs").show();
		this.initialized = true;
		this.imagelist = 0;
		this.loadcount = 0;
	}
};

$(document).ready(function()
{
	ContentFlowData.init();
});