/**
 * @version SVN:$Id$
 * @author Mishal.cz <mishal at mishal dot cz>
 * 
 */
var setupStyleSwitcherLinks = function() {
		
	Event.observe("styleswitcher_1", "click", function(e){
		switchTheme("small");
		Cookie.set('theme', 'small', 365, '/');
		$("styleswitcher_2").removeClassName("selected");
		$("styleswitcher_3").removeClassName("selected");
		$("styleswitcher_1").addClassName("selected");
		e.stop();
	});
	Event.observe("styleswitcher_2", "click", function(e){
		switchTheme("medium");
		Cookie.set('theme', 'medium', 365, '/');
		$("styleswitcher_1").removeClassName("selected");
		$("styleswitcher_3").removeClassName("selected");
		$("styleswitcher_2").addClassName("selected");
		e.stop();
	});
	Event.observe("styleswitcher_3", "click", function(e){
		switchTheme("large");
		Cookie.set('theme', 'large', 365, '/');
		$("styleswitcher_1").removeClassName("selected");
		$("styleswitcher_2").removeClassName("selected");
		$("styleswitcher_3").addClassName("selected");
		e.stop();
	});
};

var setupImagesWidthDescription = function() {
	
	// all images !
	// var images = $$('#content img.vpravo', '#content img.vlevo', '#content img.spopiskem');
	
	var images = $$('.page_content img');
	
	images.each(function(img, index) 
	{
		if(img.alt == '') return;
		
		var description = img.alt;
		var classes = 'card';
		// copy classes from image	
		classes += ' ' + img.readAttribute('class');

		/*
		<div class="card">
		  <div class="card-photo"><img src="" /></div>'
		  <div class="card-desc">Description</div>';
    </div>
		*/
		
		var card   = new Element('div', { 'class': classes});
		var photo  = new Element('div', { 'class': 'card_photo'});
		var desc   = new Element('div', { 'class': 'card_desc'}).update(description);
		
		var image = photo.insert('<img src="'+ img.src + '" />');
    card.insert(image);
		var replacement = card.insert(desc);		
    img.replace(replacement);
		
	});
	
};

Event.observe(document, 'dom:loaded', setupStyleSwitcherLinks);
Event.observe(document, 'dom:loaded', setupImagesWidthDescription);

