WidgetMagic = {
  STYLESHEET: "http://de.woobby.com/stylesheets/widget.css",
  CONTENT_URL: content,
  CONTENT_ELEMENT_ID:  'woobby_widget_0110',
  CONTENT_ELEMENT_CLASS: 'woobby_widget_0110',
  ADDITIONAL_SCRIPTS: [],  // this is an array... if you don't need any additional scripts leave an empty Array []
  
  // call this method to automatic load the stylesheet, add the content element, show the load-message load additional scripts and load the content script....
  // it does not show the widget yet
  initialize: function() {
    this.addStylesheet();
    //this.loadAdditionalScripts();
    this.addContentElement();
    this.loadContent();
    this.showWidget();
  },
  
  // loads the stylesheet.
  // your stylesheet should be very, very detailed!!! you should add a style for really everything (to overwrite the sites stylesheet)
  addStylesheet: function(stylesheet_url) {
    stylesheet_url = stylesheet_url || this.STYLESHEET;
    if(stylesheet_url=="")
			return
    stylesheet = document.createElement("link");
    stylesheet.rel = "stylesheet";
    stylesheet.type = "text/css";
    stylesheet.href = stylesheet_url;
    stylesheet.media = "all";
    document.lastChild.firstChild.appendChild(stylesheet);
  },
  // adds the div for the widget content.
  addContentElement: function() {
    element = document.createElement("div");
    element.id = this.CONTENT_ELEMENT_ID;
    element.className = this.CONTENT_ELEMENT_CLASS;
    element.style.display="none";
    document.getElementsByTagName('body')[0].appendChild(element);
  },
  // load additional scripts. add your scripts to ADDITIONAL_SCRIPTS to load them. 
  // for example if you want to use the builder (part of script.aculo.us) in your response. you can load it automaticly
  loadAdditionalScripts: function() {
    for(i=0;i < this.ADDITIONAL_SCRIPTS.length;i++) {
      script = document.createElement('script');
      script.src = this.ADDITIONAL_SCRIPTS[i];
      document.getElementsByTagName('head')[0].appendChild(script);
    }
  },
  // now load the content... 
  // this is adding a script to the head of the page... 
  loadContent: function(url) {
    if(typeof url == "undefined" || url == "") {
			url = this.CONTENT_URL; // + '&url=' + escape(local || location.href);
		}
		var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  },
  // shows the widget and hides the loading message
  showWidget: function() {
    document.getElementById(this.CONTENT_ELEMENT_ID).style.display = ''; 
    //document.getElementById('widget_loading_message').style.display="none";
  },
  // hides the widget
  hideWidget: function() {
    document.getElementById(this.CONTENT_ELEMENT_ID).style.display = 'none'; 
  },
  // appends a HTML-node to the widget-content div
  appendNode: function(data) {
    if (!data) return;
    root_element = document.getElementById(this.CONTENT_ELEMENT_ID);
    root_element.appendChild(data)
  },
  // changes the innerHTML of the widget-content div
  insertHTML: function(html) {
    if (!html) return;
    root_element = document.getElementById(this.CONTENT_ELEMENT_ID);
    root_element.innerHTML = html
  },
	clearWidget: function() {
		root_element = document.getElementById(this.CONTENT_ELEMENT_ID);
    root_element.innerHTML = "";
	},
	nextContent: function() {
		total_count = contents.length;
		num = num+1; 
		if(num>total_count) {
			num = 0;
		}
		this.loadContent(contents[num]);
	},
  
  // call this method in your response.
  // this method accepts a string which will be inserted in the widget-content div
  // 
  // CHANGE THIS METHOD FOR YOUR NEEDS
  // for example to parse your JSON-data and insert it in the dom...

  processResponse: function(response) {
    //console.log(response);
    if(!response) return;
    if(!response.global_title) { 
			response.global_title = "";
		}
		if(!response.title) { response.title = "" }
		if(!response.info) { response.info = "" }
		if(!response.url) { response.url = "http://de.woobby.com" }
		widget_content = ' \
			<div class="widget-header"> \
			<a name="woobby_widget"></a> \
			<a href="http://de.woobby.com"><img src="http://de.woobby.com/images/widget_logo.gif" class="woobby-logo" alt="Woobby.com Logo" Title="woobby.com - Teile Deine Leidenschaft"/></a> \
			</div> ';
			
			if(contents.length > 1) {
				widget_content = widget_content + '<div class="widget_pagination"><a href="#woobby_widget" onclick="WidgetMagic.nextContent();void(0);">nächstes Ranking <img src="http://de.woobby.com/images/layout/ic_pfeil.gif" alt="Pfeil-Icon" title="nächstes Ranking"/></a></div>';
			}

			if(typeof woobby_headline != "undefined" && woobby_headline != "") {
				widget_content = widget_content + '<div class="widget_headline">' + woobby_headline + '</div>';
			}
			if(response.global_title && response.global_title != "") {
				widget_content = widget_content + '<div class="widget_global_title">' +  response.global_title + '</div>';
			}
			widget_content = widget_content + ' \
			<div class="widget_global_title">' +  response.title + '</div> \
			<div class="widget_item_list"> \
			<div class="widget_object_info">' + response.info +'</div>';
		
		max_length = response.items.length <= woobby_max_length ? response.items.length : woobby_max_length;

		for(i=0;i<max_length;i++) {
				
				widget_content = widget_content + '<div class="widget_feat-item"> \
			        <div class="widget_item-platzierung">'+ response.items[i].title + '</div> \
			        <div class="widget_rankingstern1">' + response.items[i].index + '</div> \
			        </div>';
				
		}
		widget_content =  widget_content + '\
			<div class="widget_footer"> \ ';
			if(response.items.length > max_length) {
				widget_content = widget_content + '<a href="'+ response.url + '">Alle '+ (response.items.length) + ' Einträge anzeigen</a><br />';
			}
			widget_content = widget_content + ' \
			</div> \
			<div class="widget_footer_functions"> \
			<a href="' + response.url + '" target="_blank">Erstelle Dein eigenes Ranking <img src="http://de.woobby.com/images/layout/ic_pfeil.gif" alt="Pfeil-Icon" title="Erstelle Dein eigenes Ranking"/></a> \
			</div> \
			<div class="widget_footer_link"> \
				<a href="http://www.woobby.com" target="_blank">www.woobby.com</a> \
			</div></div>';
		//widget_container = document.getElementById('woobby_widget');
		//widget_container.appendChild(widget_content);
		this.insertHTML(widget_content);
		this.showWidget();
  }
};


function run_widget() {
	if(typeof woobby_widget_stylesheet != "undefined") {
		if(woobby_widget_stylesheet == false) 
			WidgetMagic.STYLESHEET = "";
		else 
			WidgetMagic.STYLESHEET = woobby_widget_stylesheet;
	}
	WidgetMagic.initialize();
}

if (window.addEventListener) window.addEventListener("load",run_widget,false);
else if (window.attachEvent) window.attachEvent("onload",run_widget);