//-----------------------------------------------------
// move social buttons
//-----------------------------------------------------
// remove old social buttons
$$('.col_right .feature').each(function(el) {el.dispose();});
// create new ones and inject them in the footer
var footer = document.id('footer'); 
footer.setStyle('overflow', 'hidden');
var sb = new Element('div', {
    'class':'social-buttons',
    styles: {
        float: 'right',
        overflow: 'hidden',
        position: 'relative',
        top: -2
    }
}); 
var tw = new Element('a', {
    html: 'Folge uns auf <img style="margin-left:2px;margin-right:-2px;position:relative;top:3px" src="http://denkanstoesse.de/social_buttons/icon_tw.png"> Twitter',
    href: 'http://twitter.com/denkanstoesse',
    target: '_blank',
    styles: {
        float: 'left'
    }
}).inject(sb);
new Element('div', {
    html: ' | ',
    styles: {
        float: 'left',
        position: 'relative',
        top: 3
    }
}).inject(sb);
var fb = new Element('a', {
    html: 'Diskutiere mit auf unserer <img style="margin-left:2px;margin-right:-2px;position:relative;top:3px" src="http://denkanstoesse.de/social_buttons/icon_fb.png"> Facebook-Seite',
    href: 'http://facebook.com/denkanstoesse',
    target: '_blank',
    styles: {
        float: 'left'
    }
}).inject(sb); 
sb.inject(footer);

//-----------------------------------------------------
// change video article order
//-----------------------------------------------------
$$('.col_right > div')[0].inject($$('.col_right > div')[1], 'after');
 


//-----------------------------------------------------
// DOSSIER
//-----------------------------------------------------
 
var Dossiers = {
	options: {
		articleIndexUrl: 'http://denkanstoesse.de/Dossier', 
		teaserImageSrc: 'http://denkanstoesse.de/file/248/220',
		teaserFontSrc: 'http://denkanstoesse.de/webfontkit-20101116-074438/stylesheet.css',
		indexImageSrc: 'http://denkanstoesse.de/file/249/460'
	},
	run: function() {
		if (window.location.toString().indexOf('dev.')!=-1){
			this.options = {
				articleIndexUrl: 'http://dev.denkanstoesse.de/Dossier', 
				teaserImageSrc: 'http://dev.denkanstoesse.de/file/202/220',
				teaserFontSrc: 'http://dev.denkanstoesse.de/webfontkit-20101116-074438/stylesheet.css',
				indexImageSrc: 'http://dev.denkanstoesse.de/file/203/460'
			}
		}
		var self = this; 
		this.isDossiersIndex = window.location.toString().indexOf('/Dossier')!=-1 && window.location.toString().indexOf('/Dossier/') == -1;
		this.isDossiersArticle = window.location.toString().indexOf('/Dossier/') != -1;

		// LEFT COLUMN: 
		// when viewing a non-dossier page, create a teaser for the Dossier in the left column.
		$$('.col_left .category').each(function(el) {
		    if (el.getElement('span').get('html').toLowerCase() == 'dossier') {
		    	if (!self.isDossiersArticle && !self.isDossiersIndex) {
		    		new Dossiers.Teaser(el);
		    	} 
		    }
		}); 
		
		// CENTER COLUMN:
		// when on the dossiers index page, create IndexPage instance
		if (this.isDossiersIndex) {
			new Dossiers.IndexPage();
		}
		// when on a dossiers article page, create ArticlePage instance
		if (this.isDossiersArticle) {
			new Dossiers.ArticlePage();
		}
	}
};

/**
 * Retrieves a list of all dossier articles by loading the dossier index page via ajax and grabbing the html contents.
 * Fires a 'complete' event upon success, and an 'error' event on failure.
 * The result is an array of objects:
 * [{
 * 	title:
 *  description: 
 *  href:
 *  data:
 * },[...]]
 * passed with the complete event, and also stored as a 'result' property.
 */
Dossiers.ArticleList = new Class({
 	Implements: [Events, Options], 
	initialize: function(options) {
		this.setOptions(options); 
		if (options && options.hasOwnProperty('events')) {
			for (var evt in options.events) {
				if (options.events.hasOwnProperty(evt)) {
					this.addEvent(evt, options.events[evt]);
				}
			}
		}; 
	},
	getArticles: function(url) { 
		var self = this;
		var tmp = new Element('div', {'class':'tmp'});
		url = url || Dossiers.options.articleIndexUrl;
		self.request = new Request.HTML({
			url: url, 
			method: 'get',
			onSuccess: function(response) {
				var result = [];  
				tmp.adopt(response);
				var articles = tmp.getElements('.article.short'); 
				articles.each(function(div){ 
					result.push({
						title: div.getElement('h1').get('html'),
						subtitle: div.getElement('h2').get('html'),
						description: div.getElement('.description').get('html'),
						href: div.getElement('.more').get('href'),
						date: div.getElement('.modified').get('html')
					});
				});
				self.result = result;
				self.fireEvent('complete', [result]);
				delete self.request;
				delete tmp;
			},
			onFailure: function() {  
				delete self.request;
				self.fireEvent('error', ['Failed loading \''+url+'\', '+arguments[0]]); 
			}
		}).send(); 
	}
});
/**
 * The left-column teaser for the Dossier. It replaces the normal category view for the "Dossier" category. 
 */
Dossiers.Teaser = new Class({ 
	options: {
		title: '<span style="font-size:18px">Der Nachhaltigkeitsforscher Felix Ekardt</span>'
	},
    initialize: function(el) {      
		var moreLink = el.getElement('.more');
		moreLink.dispose();
		
        var img = el.getElement('img'); 
        img.set('opacity', 0);          
        img.set('src', Dossiers.options.teaserImageSrc);
        img.setStyles({
            float: 'none',
            maxWidth: 220,
            width: 220
        });
        img.addEvents({
        	'load': function() {
        		img.set('opacity', 1);
        	},
        	'click': function(e) {
        		new Event(e).stop();
        		window.location = moreLink.get('href');
        		return false;
        	}
        });    
        
        // the title
        
        // embed font
        new Asset.css(Dossiers.options.teaserFontSrc);        
        el.setStyles({
        	position: 'relative',
        	height: 245
        });
        var title = new Element('div', {
        	html: 'In dieser Woche:<br>'+this.options.title,//el.getElement('.title').get('html'),
        	styles: {
        		position: 'absolute',
        		bottom: 5,
        		left: 6,
        		color: 'white', 
        		fontSize: 16,
        		fontFamily: 'TradeGothicLTStdBold',
        		'text-shadow': '2px 2px 2px #000',
        		cursor: 'pointer', 
        		width: 208,
        		overflow: 'hidden'
        	},
        	events: {
        		click: function(e) {
	        		new Event(e).stop();
	        		window.location = moreLink.get('href');        		
        		}
        	}
        }).inject(el);
        if (Browser.Engine.trident) {
        	title.setStyle('filter', 'dropshadow(color=#000000,offX=1,offY=1)')
        }
        el.getElement('.title').destroy();
        el.getElement('p').destroy();
    }
});
 

/**
 * Used by Dossiers.ArticlePage on article pages. 
 * A div that contains links to all other articles.
 * Retrieves the list of articles using Dossier.ArticleList. 
 */
Dossiers.ArticleLinksIndex = new Class({ 
	Binds: ['onDataLoaded'],
	initialize: function() {
		this.createElements();		
		this.getArticles();		
	},
	/**
	 * creates the default elements
	 */
	createElements: function() {
		this.element = new Element('div', {
			'class': 'dossier-article-index'
		});		
		// header
		var css = new Element('style', {
			html: '.dossier-article-index h1:hover {color:#F26522;text-decoration:underline}'
		}).inject(document.body, 'top');
		this.title = new Element('h1', {
			html: 'Alle Artikel dieses Dossiers:',
			events: {
				'click': function() {
					window.location = Dossiers.options.articleIndexUrl
				}
			},
			styles: {
				cursor: 'pointer'
			}
		}).inject(this.element);
		// list
		this.list = new Element('ul').inject(this.element); 
	},
	/**
	 * retrieves a list of articles, delegates the result to createLinkIndex()
	 */
	getArticles: function() {
		var self = this;
		(function() {
			return new Dossiers.ArticleList({
				events: {
					complete: function(result) { 
						//result.shift(); // remove Einführungstext
						self.createLinks(result)
					}
				}
			}).getArticles();
		})();
	},
	/**
	 * creates a link for each dossier article
	 */
	createLinks: function(articles) { 
		var self = this;  
		articles.each(function(article, i) {
			var li = new Element('li').inject(self.list);
			var isCurrentPage = window.location.toString().indexOf(article.href) != -1;
			var a = new Element('a', {
				html: article.subtitle,//'<span style="float:right">'+article.date+'</span>'+/*(articles.length-i)+'. '+*/article.subtitle,
				href: article.href,
				styles: {
					display: 'block'
				}
			}).inject(li); 
			/*
			if (isCurrentPage) {
				var div = new Element('div', {
					html: article.subtitle,//'<span style="float:right">'+article.date+'</span>'+article.subtitle
				}).inject(li); 
			}
			else {
				var a = new Element('a', {
					html: article.subtitle,//'<span style="float:right">'+article.date+'</span>'+article.subtitle,
					href: article.href,
					styles: {
						display: 'block'
					}
				}).inject(li); 
			}*/
		});
	} 
});


/**
 * Used on the Dossier article index page.
 * Puts the title image above the article listing and removes all images from the listed articles.
 */
Dossiers.IndexPage = new Class({
	initialize: function() { 
		this.createTitleImage(); 
		this.initArticles();
	},
	createTitleImage: function() { 		
		var titleDiv = new Element('div', {
			'class': 'article-index-header'
		}).inject($$('#content .article')[0], 'before');		
		var titleImage = new Element('img', {
			src: Dossiers.options.indexImageSrc,
			styles: {
				width:460,
				height: 456 
			} 
		}).inject(titleDiv);
		var credit = new Element('div', {
			html: 'George Grosz: The City, 1916/17; Standort: Castagnola, Sammlung Thyssen-Bornemisza;<br>Bildrecht: VG Bild-Kunst',
			'class': 'image_credit'
		}).inject(titleDiv);
	},
	initArticles: function() {
		 
		
		$$('#content .article.short .article').each(function(div) {
			div.setStyles({
				marginTop: 0
			});
			$(div.parentNode).setStyles({
				paddingTop: 0				
			})
			div.getElement('img.leader').destroy();
			div.getElement('.image_credit').destroy();
			div.getElement('h2').setStyles({
				clear: 'both',
				margin:0
			});
		}); 
		var listItems = $$('#content .article.short');
		//listItems[listItems.length-1].inject(listItems[0], 'before');
	}
});

/**
 * Used on article pages.
 * Adds a list of links to other articles.
 */
Dossiers.ArticlePage = new Class({
	initialize: function() {
		this.articleIndex = new Dossiers.ArticleLinksIndex();
		this.articleIndex.element.inject($$('#stage .article .body')[0]); 
	} 
});
 
Dossiers.run();