Event.observe(window,'load',function(){
  start_observers();
  setup_styles();

 // observe_sortables();
});

//this allows users who aren't logged in to have their prefs 'saved' in cookies
function setup_styles(){
	if (!document.location.href.match(/profile/)) {
		// Else branches are defaults - AQ
		var bgcolour = get_cookie('uioptions_bgc');
		if (bgcolour) {
			set_page_background("colour_"+bgcolour,"bgcolour")
		} else {
			set_page_background("colour_orange", "bgcolour")
		}

		var bgtile = get_cookie("uioptions_bgt");
		if (bgtile) {
			set_page_background(bgtile,"bgtile");
		} else {
			set_page_background('frame2', 'bgtile');
		}
	
		var bgimage = get_cookie("uioptions_bgi")
		if (bgimage){
			set_page_background(bgimage,"bgimage");
		} else {
			set_page_background('floppy.png', 'bgimage');
		}
	}
}

function start_observers()
{
  //if there's a controlPanelHandle div, observe its clicks
  if($('controlPanelHandle'))
  {
  	/*
  	//show the control panel
    Element.observe('customise_button', 'click', function(){
      if($('controlPanel').getStyle('display')!="block"){
        Effect.SlideDown('controlPanel', {duration: 0.1});
	$('customise_button').setStyle({'display':'none'});
	$('customise_button_hide').setStyle({'display':'block'});
	set_cookie('uioptions_cp','controlpanel=on',28);
      }
    });

    //hide the control panel
    Element.observe('customise_button_hide', 'click', function(){
      if($('controlPanel').getStyle('display')!="none"){
        Effect.SlideUp('controlPanel', {duration: 0.1});
	$('customise_button_hide').setStyle({'display':'none'});
	$('customise_button').setStyle({'display':'block'});
	set_cookie('uioptions_cp','controlpanel=off',28);
      }
    });
  	*/
  	
  	//show the control panel
    Element.observe('customise_button', 'click', function(){
      if($('controlPanel').getStyle('display')!="block"){
        Effect.SlideDown('controlPanel', {duration: 0.1});
	$('customise_button').setStyle({'display':'none'});
	$('customise_button_hide').setStyle({'display':'block'});
	set_cookie('uioptions_cp','controlpanel=on',28);
      }
    });

    //hide the control panel
    Element.observe('customise_button_hide', 'click', function(){
      if($('controlPanel').getStyle('display')!="none"){
        Effect.SlideUp('controlPanel', {duration: 0.1});
	$('customise_button_hide').setStyle({'display':'none'});
	$('customise_button').setStyle({'display':'block'});
	set_cookie('uioptions_cp','controlpanel=off',28);
      }
    });  	
  	
  }
  if($('controlPanel')){
    //collect the image/style controls
    var bg_images  = $('controlPanel').select('[class="bgswitcher"]');
    var bg_colours = $('controlPanel').select('[class="bgcolour"]');
    var bg_tiles   = $('controlPanel').select('[class="bgframe"]');

    //observe the image buttons
	if (document.location.href.match('/profile/')) {
		cookie = false;
	} else {
		cookie = true;
	}

    bg_images.each(function(bg){
      Event.observe(bg.id, 'click', function(){set_page_background(bg.id, 'bgimage', cookie)});
    });

    bg_colours.each(function(bg){
      Event.observe(bg.id, 'click', function(){set_page_background(bg.id, 'bgcolour', cookie)});
    });

    bg_tiles.each(function(bg){
      Event.observe(bg.id, 'click', function(){set_page_background(bg.id, 'bgtile', cookie)});
    });
  }
  if($('iconButtons')){
    Event.observe('butnDwn', 'click', function(){slide_icons_container('iconContainer', 'down')});
    Event.observe('butnUp', 'click', function(){slide_icons_container('iconContainer', 'up')});
  }
    

}

function slide_icons_container(parentDiv, direction){

	if (direction == 'down') {
		var current = $(parentDiv).scrollTop;
		var rowHeight = parseFloat($(parentDiv).getStyle('height'));
		if (current < rowHeight) {
			new Effect.Tween(parentDiv, current, rowHeight, function(p){$(parentDiv).scrollTop = p.toFixed(3);})
		}
	} else if (direction == 'up') {
		/*
		A fix is required here to stop the up constantly
		making the tween scrolling upwards.
		ie: if (i >0) then allow scrollup command
		*/
		var current = $(parentDiv).scrollTop;
		var rowHeight = parseFloat($(parentDiv).getStyle('height'));
		if (current != 0) {
			new Effect.Tween(parentDiv, rowHeight, 0, function(p){$(parentDiv).scrollTop = p.toFixed(3);});
		}
	}
}
//this will fire off an ajax request to update the users' style
function set_page_background(image_id, updatetype, cookie){
	if (typeof cookie == "undefined") {
		cookie = true;
	}

	switch(updatetype){
		case 'bgimage':
			//alert(image_id);
			$('container').up().setStyle({"background":"url(/freehand/img/bg/" + image_id + ")"});
			new Ajax.Request('/freehand/index.php/user/update_skin/' + updatetype + '/' + image_id, {method:'get'});
			if (cookie) {
				set_cookie('uioptions_bgi', image_id);
			}
		break;
		case 'bgcolour':
			//which divs should we add a class to
			var update_divs = $('container').select('.nugget','#controlPanel','#controlPanelHandle','#menu', '#customize-bar', '#menu2', '#header','#assetgrid * #profile_controlPanel','.active_item');
			($('current_page_tab')) ? update_divs.push($('current_page_tab').innerHTML) : log() ;
	  
			var known_colours = ["violet", "blue", "green", "pink", "red", "orange"];
			//the new colour
			var colour = image_id.split("_")[1];
	
			//first we need to remove the class from the divs - this is a quick hack
			update_divs.each(function(d){
				known_colours.each(function(c){
					var el = $(d).identify();
					$(el).removeClassName(c);
			  	});
	
				var el = $(d).identify();
				$(el).addClassName(colour);
				if (cookie) {
					set_cookie('uioptions_bgc', colour);
				}
			});
			new Ajax.Request('/freehand/index.php/user/update_skin/' + updatetype + '/' + colour, {method:'get'});
		break;
		case 'bgtile':
			new Ajax.Request('/freehand/index.php/user/update_skin/' + updatetype + '/' + image_id, {method:'get'});
			var update_divs = $('container').select('.nugget');
			update_divs.each(function(d){
			if (image_id!='frame1') {
					$(d.id).removeClassName('frame1');
					$(d.id).addClassName('frame2');
				} else if(image_id!='frame2'){
					$(d.id).removeClassName('frame2');
					$(d.id).addClassName('frame1');
				} else {
					$(d.id).removeClassName('frame2');
					$(d.id).addClassName('frame1');		
				}
			});
			if (cookie) {
				set_cookie('uioptions_bgt', image_id);
			}
		break;
	}
}
//convenient log method - outputs to firebug console
function log(msg, type){
  var prefix = 'LOG: ';
  switch(type){
    case 'i': prefix = 'INFO: '
    break;
    case 'w' : prefix = 'WARNING: '
    break;
    default : prefix = 'LOG: '
  }
  try{console.log(prefix + msg)}catch(e){}
}

//set cookie with value, to expire in n days
function set_cookie(name,value,days){
  //create date
  var today = new Date(); today.setTime(today.getTime());
  var cookie_expires = new Date(today.getTime() + (1000 * 60 * 60 * 24));

  document.cookie = name + '=' + value + '; expires=' + cookie_expires.toGMTString() + ';path=/';
}
//get a cookie with a name
function get_cookie(name){
  var web_cookies = document.cookie.split(";");
  var cookie = "";
  web_cookies.each(function(c){
    var cname = c.split("=")[0].strip();
    var cvalue = c.split("=")[1].strip();
    if(cname==name)
      cookie = cvalue;
  });

  return cookie;
}

//this will observe when a user sorts the nuggets
function observe_sortables(){
  log("OBSERVING SORTABLES");
  if(!($('assetgrid')))
    return ;
  var nuggets = $('assetgrid').select('#group0', '#group1', '#group2','#group3');
  log(nuggets);

  nuggets.each(function(n){
    var nid = n.id;
    eval("var nid = Sortable.create(n.id, {tag:'div', only:'nugget', scroll: window, constraint:false, containment: nuggets, revert:'true', dropOnEmpty: true, dropZoneCss: 'nuggetHover'})");
  });
}
function swapImg(elmID,img){
   var elm = document.getElementById(elmID);
   elm.src = img;
   return true;
}

function change_recentItem(classType,moveType)
{
	/*
	alert(classType);
	alert(moveType);
	*/
	
	elms = $$('.'+classType);
	if (moveType.toUpperCase() == "NEXT") {
		if($(classType+'_thisCnt').value >= $(classType+'_maxCnt').value)
		{
			$(classType+'_thisCnt').value = 0;
		} else {
			$(classType+'_thisCnt').value++;
		}
	} else if (moveType.toUpperCase() == 'PREV') {
		if($(classType+'_thisCnt').value <= 0){
			$(classType+'_thisCnt').value = $(classType+'_maxCnt').value;
		} else {
			$(classType+'_thisCnt').value--;
		}
	}
	
	for(rep = 0; rep < elms.length; rep++)
	{
		if(rep == $(classType+'_thisCnt').value)
			elms[rep].style.display = 'block';	
		else 
			elms[rep].style.display = 'none';	
	}
	
}