function editCSS() {

  var width = Math.max(300,Math.min(parseInt(window.localStorage.cssEditorWidth),500));

  var $page = 
  $('<div id="cssedit-page"></div>')
  $('body').html($page);

  var windowName = 'w'+((Math.random()*10000)|0);
  var href = location.href.split('#')[0];
  href = href + (location.href.indexOf('?') > -1 ? '&' : '?') + 'tools=mainframe';
  var $iframe = 
  $('<div id="cssedit-html"><iframe style="width:100%;height:100%" name="'+windowName+'" id="htmlframe" src="'+href+'"></iframe></div>')
  .appendTo($page);

  function _getSheets(sheet,sheets) {
    sheets.push(sheet);
    for (var i = 0; i<sheet.cssRules.length; i++) {
      var s = sheet.cssRules.item(i);
      if (s.type==3) _getSheets(s.styleSheet,sheets);
    }
  }
  
  function getSheets(doc) {
    var sheets = [];
    for (var i=0; i < doc.styleSheets.length; i++) {
      _getSheets(doc.styleSheets.item(i),sheets);
    }
    return sheets;
  }
  function removeSheets(doc,sheets) {
    for (var i=0; i<sheets.length;i++) {
      $(sheets[i].ownerNode).remove();
    }
  }
  
  function makeBoxes(doc,sheets) {
    var boxes = [];
    $tabs.empty();
    for (var i=0; i<sheets.length;i++) {
      boxes.push(makeBox(doc,sheets[i]));
    }
    return boxes;
  }

  function setupBox(doc,box) {
      box.$style = $('<style>' + box.$text.val() + '</style>').appendTo($('head',doc));
      box.$style.html(box.$text.val());
  }
  
  function setupBoxes(doc,boxes) {
    for (var i = 0; i<boxes.length; i++) {
      setupBox(doc,boxes[i]);
    }
  }
  
  var loaded = false;
  var boxes = [];

  $('#htmlframe').load(function () {
    var doc = frames[windowName].document;
    sheets = getSheets(doc);
    if(!loaded) boxes = makeBoxes(doc,sheets);
    removeSheets(doc,sheets);
    if (loaded) setupBoxes(doc,boxes);
    loaded = true;
  });
  
  var $editor = 
  $('<div id="cssedit-editor"></div>')
  .appendTo($page);
  
  var $tabs = 
  $('<div id="cssedit-tabs"></div>')
  .appendTo($editor);
 
  function setWidth(w) {
    width = Math.max(200,Math.min(w,1000));
    $editor.width(width);
    $iframe.css('left',width);
    window.localStorage.cssEditorWidth = width;
    
  }
  setWidth(width); 
  var $more = 
  $('<button id="cssedit-more">&gt;</button>')
  .click(function() {
    setWidth(width+100);
  })
  .appendTo($tabs);
  var $less = 
  $('<button id="cssedit-less">&lt;</button>')
  .click(function() {
    setWidth(width-100);
  })
  .appendTo($tabs);

  
  function makeBox(doc,sheet) {
    var msg = sheet.href.match( /css[/]([^?]*)/ );
    if (!msg) return;
    msg = msg[1];

    var box = {
      doc:doc,
      sheet:sheet,
      msg:msg
    }
    
    box.$box = 
    $('<div class="cssedit-box"></div>')
    .appendTo($editor);

    box.$tab =
    $('<button class="cssedit-tab">'+msg+'</button>')
    .click(function() {
      box.$box.appendTo($editor);
      $tabs.find('.cssedit-tab.selected').removeClass('selected');
      box.$tab.addClass('selected');
    })
    .appendTo($tabs);
    box.$tab.click();


    $.get(sheet.href, function(data) {
      var T = null;
      var oldtext = data;
      
      box.$textwrap= 
      $('<div class="cssedit-textwrap"></div>')
      .appendTo(box.$box);

      box.$text =
      $('<textarea class="cssedit-textarea">'+data+'</textarea>')
      .keyup(function() {
        clearTimeout(T);
        T = setTimeout(function() {
          box.$tab.text('*'+msg);
          box.$style.html(box.$text.val());
          box.$save.removeAttr('disabled');
        }, 1000)
      })
      .appendTo(box.$textwrap);

      box.$bar = 
      $('<div class="cssedit-bar"></div>')
      .appendTo(box.$box);

      box.$save =
      $('<button id="cssedit-save" class="cssedit-button">save</button>')
      .click(function() {
        box.$save.attr('disabled','disabled');
	      $.get('/w/api.php?format=json&action=query&meta=userinfo',function(data){
		      var user = data.query.userinfo.name;
		      var title = 'MediaWiki:'+msg+'.css';
		      $.get('/w/api.php?format=json&action=query&prop=info&intoken=edit&titles='+title,function(data){
			      var token;
			      for (var i in data.query.pages) {
				      token = data.query.pages[i].edittoken;
			      };
			      var args = {
				      action:'edit',
				      title: title,
				      text: box.$text.val(),
				      summary: 'from css editor',
				      token: token,
				      format: 'json'
			      };
			      $.post('/w/api.php', args, function(data) {
              box.$save.attr('disabled','disabled');
              box.$tab.text(msg);
			      });
		      },'json');
	      },'json');
      })
      .appendTo(box.$bar);

      box.$close =
      $('<button id="cssedit-close" class="cssedit-button">close</button>')
      .click(function() {
        top.location.reload(true);
      })
      .appendTo(box.$bar);
      setupBox(doc,box);
    });  
    return box;
  }
}



$(function() {
   var editors = [];

  $('a[href=#EditCss]').click(function(e) { 
    editCSS();
  });
  
  var lnk = document.createElement('a');
  lnk.setAttribute('href','/Special:userlogin');
  lnk.className = 'login-link';
  document.body.appendChild(lnk);
  
   (function (sel){
       if (wgTitle.match(/[.]js$/)) var mode = 'javascript';
       else if (wgTitle.match(/[.]css$/)) var mode = 'css';
       else return;
   
     $(sel).each(function() {
       var $this = $(this);
       var name = $this.attr('id');
       if (editors[name]) return;
       var id = name + "_editor";
       var div = $('<div id="' + id + '"></div>');
       div.height($this.height());
       div.width($this.width());
       $this.before(div);
//       else if (wgTitle.match(/[.]xml$/)) var mode = 'xml';
//       else var mode = 'html';
     
       editors[name] = ace.edit(id);
       editors[name].setTheme("ace/theme/chrome");
       editors[name].setShowPrintMargin(false);
       editors[name].session.setMode("ace/mode/"+mode);
       editors[name].session.setFoldStyle('markbegin');
       editors[name].session.setTabSize(2);
       editors[name].getSession().setValue($this.val());
       editors[name].commands.addCommand({
         name: 'compile',
         bindKey: {
             win: 'Ctrl-S',
             mac: 'Command-S',
             sender: name
         },
         exec: function(env, args, request) {
             $('#wpSave').click();
         }
       })
       $this.parent('form').submit(function(){$this.val(editors[name].getSession().getValue());});
     });
  })('#wpTextbox1');
 
 //reflow 
 var reflow = function(doc){
    var max = 0;
    var col = [0,0];
    var boxen = doc.querySelectorAll('.album');
    for (var i=0;i<boxen.length;i++) {
      var box = boxen.item(i);
    	var k = i % 2;
    	var min = max;
    	var k = 0;
    	for (var j=0;j<col.length;j++) {
    	  if (col[j]<min || col[j]==min && j<k) {
    	    min = col[j];
    	    k = j;
    	  }
    	}
    	if (!box.done || force) {
          box.style.position = 'absolute';
          box.style.top = col[k]+'px';
          box.style.left = k*370 + 'px';
          box.style.opacity = 1;
          box.done = 1;
        }        col[k] += box.scrollHeight+5;
    	if (col[k]>max) max = col[k];
    }
    if (i>0) doc.style.height = max + "px";
  };

  $('#albums, div.section').each( function(idx,itm) {
    reflow(itm);
  });

  $('#sidebar-wrap').prepend($('#toc'));

  var content = document.getElementById('main');
	var sidebar = document.getElementById('sidebar-wrap');
	var maxdiff = content.scrollHeight-sidebar.scrollHeight;
	if (maxdiff<0) {
		maxdiff = 0;
		//sidebar = article;
	}
	var minscroll = content.offsetTop;
   //console.log (sidebar);
	var positionArticleSidebar = true;
	function positionArticleContent() {
	   if (!positionArticleSidebar) return;
      var maxscroll = maxdiff + minscroll;
		var scroll = window.pageYOffset || document.body.scrollTop ||     document.documentElement.scrollTop;
		//console.log(content.scrollHeight,sidebar.scrollHeight,'min='+minscroll+' max='+maxscroll+' SCROLL='+scroll);
		if (scroll>maxscroll) scroll = maxscroll;
		if (scroll>minscroll) {
			//sidebar.style.marginTop = (scroll-minscroll) + 'px';
      sidebar.style.position = 'fixed';
      sidebar.style.top = '18px';
      
      // Sidebar vecji od okna?
      if (window.innerHeight < sidebar.scrollHeight + 18) {
        omax = window.innerHeight - sidebar.scrollHeight - 18;
        smax = content.scrollHeight - window.scrollHeight;
        sidebar.style.top = (scroll/smax) * omax + 18 + 'px';
      }
		} else {
			//sidebar.style.marginTop = 0;
      sidebar.style.position = 'relative';
		}
	}

	if( window.attachEvent ) {
	  window.attachEvent('onresize',function(e){positionArticleContent()});
	  window.attachEvent('onscroll',function(e){positionArticleContent()});
	} else if( document.addEventListener ) {
	  window.addEventListener('resize',function(e){positionArticleContent()},false);
	  document.addEventListener('scroll',function(e){positionArticleContent()},false);
	}

	window.onload=function(){
		maxdiff = content.scrollHeight-sidebar.scrollHeight;
		if (maxdiff<0) {
			maxdiff = 0;
		}
		minscroll = content.offsetTop;
		if (maxdiff) positionArticleContent();
	}


  $('.events').each(function() {
    var animateEvents = true;
    var $events=$(this);
    (function animate() {
      if (animateEvents) {
        var $sel = $events.find('.event.selected').next('.event');
        if (!$sel.length) $sel = $events.find('.event').eq(0);
        $events.find('.event').removeClass('selected');
        $sel.addClass('selected');
        setTimeout(animate,4000);
      } else {
        setTimeout(animate,60000);
        animateEvents = true;
      }

    })()
  
    $('.events').delegate('.event-tab','click',function() {
       animateEvents = false;
       var $this = $(this);
       $events.find('.event').removeClass('selected');
       $this.closest('.event').addClass('selected');
    })
  });

})

$(window).ready(function() {
  // focus search box, if no other inputs present and no anchor
  if($('input').length==4 && !window.location.hash) {
    $('#searchInput').focus();
  }
  $('.sidebar-extra').appendTo('#sidebar-extra');

 // Application.setup();
});


var toolbarInsertButton = function ( imageFile, speedTip, tagOpen, tagClose, sampleText) {
  var image = $('<img>', {
  	width : 23,
  	height: 22,
  	src   : '/w/skins/common/images/button_'+imageFile+'.png',
  	alt   : speedTip,
  	title : speedTip,
  	'class': 'mw-toolbar-editbutton'
	} ).click( function () {
		toolbarInsertTags( tagOpen, tagClose, sampleText);
		return false;
	} );

	$('#toolbar').append( image );
	return true;
};
var toolbarInsertTags = function ( tagOpen, tagClose, sampleText) {
  var box = $('#wpTextbox1')[0];
  if (!box) return;
  var start = box.selectionStart;
  var end = box.selectionEnd;
  var len = end-start;
  var old = box.value;
  var txt = tagOpen + (len == 0 ? sampleText : old.substring(start,end)) + tagClose;
  box.value = old.substr(0,start)+txt+old.substr(end);
  $(box).focus();
  box.selectionStart = start+tagOpen.length;
  box.selectionEnd = end+txt.length-len-tagClose.length;
};
$(function(){
  toolbarInsertButton('bold','b',"'''","'''",'bold text');
  toolbarInsertButton('italic','i',"''","''",'italic text');
  toolbarInsertButton('link','l',"[[","|","]]",'page name|title');
  toolbarInsertButton('extlink','e',"["," title]",'http://www.example.com');
  toolbarInsertButton('image','i',"\n[[Image:","]]",'example.jpg');
  toolbarInsertButton('nowiki','n',"<nowiki>","</nowiki>",'no wiki text');

  if(!wgUserName) $('.img-edit-link').remove();
});