//
// common.js
//

$.registerLiquidCanvasPlugin({
	name: "mandala",
	paint: function(area){
		var opts = this.opts;
		var ctx = area.ctx;
		var min = area.width > area.height ? area.height : area.width;
		var trans = min / 2;
		var rad = trans / 3;
		for (var i = 0; i < 10; ++i) {
		area.save();
		ctx.translate(area.width / 2, area.height / 2);
		ctx.rotate(i * 2*Math.PI / 10);
		ctx.translate(trans - rad, 0);
		area.width = 30;
		area.height = 30;
		this.action.paint(area);
		area.restore();
	  }
	}
});

$(window).load(function() {
  $(".leftnavi").liquidCanvas("[border{color:#5f5b58; width:1;} gradient{from:#938D87; to:#6C6965;}] => roundedRect{radius:5}");
  $(".leftnavi-active").liquidCanvas("[border{color:rgba(95, 91, 88, 0.4); width:1;} gradient{from:rgba(147, 141, 135, 0.4); to:rgba(108, 105, 101, 0.4);}] => roundedRect{radius:5}");
  $(".ads-container").liquidCanvas("fill{color:#B4ACA0} => roundedRect{radius:5}");
  $(".border").liquidCanvas("[border{color:rgba(0, 0, 0, 0.3); width:3;} fill{color:#000000}] => rect");
  $(".border_navi").liquidCanvas("[border{color:rgba(40, 40, 40, 0.3); width:3;} fill{color:#000000}] => rect");
  $("#search_box").liquidCanvas("[border{color:#999999; width:1;} gradient{from:#9D9C9A; to:#DFDEDD;}] => roundedRect{radius:5}");
  $(".read-more").liquidCanvas("[border{color:#5F5B58; width:1;} gradient{from:#908A84; to:#6F6C68;}] => roundedRect{radius:5}");
  $(".popup").liquidCanvas("[border{color:rgba(255, 255, 255, 0.9); width:1;} gradient{from:rgba(255, 255, 255, 0.9); to:rgba(255, 255, 255, 0.9);}] => roundedRect{radius:10}");
  $(".loading").liquidCanvas("[border{color:rgba(255, 255, 255, 0.9); width:1;} gradient{from:rgba(255, 255, 255, 0.9); to:rgba(255, 255, 255, 0.9);}] => roundedRect{radius:10}");
  $("#section-editor").liquidCanvas("[shadow fill{color:#857F79}] => roundedRect{radius:10}");
  $("#section-editor2").liquidCanvas("[shadow fill{color:#857F79}] => roundedRect{radius:10}");
  $("#ajibox").liquidCanvas("fill{color:#333333} => roundedRect{radius:5}");
});

$(document).ready(init);

function init() {  
	$("#global_navi a").bind("mouseover", hoverSummary);
	$("#global_navi a").bind("mouseout", removeSummary);
	$("#search").bind("focus", searchFocus);
	$("#search").bind("blur", searchBlur);
	$('.wrap-block a.lightbox').lightBox();
}


/**
 * get summary element from jQuey.data
 *
 * @param p   parent (jQuery Object)
 *
 * @return  return the summary element.
 */
function getSummaryElement(p) {
  var id = p.attr('id');
  var navi= $('#global_navi');

  return $.data(navi.get(0), id);
}

/**
 * set summary element to jQuery.data
 *
 * @param p   parent (jQuery Object)
 * @param e   element to store.
 *
 * @return  return the summary element.
 */
function setSummaryElement(p, e) {
  var id = p.attr('id');
  var navi= $('#global_navi');

  $.data(navi.get(0), id, e);
  return e;
}

/**
 * create summary panel.
 * 
 * @param p   parent (jQuery Object)
 */
function createSummaryElement(p){
  var id = p.attr('id');
  var navi= $('#global_navi');

  /*
  var left = p.position().left + 459;
  var left = p.position().left + 369;
  */
  var left = p.position().left + 302;
  var top = p.height() + p.position().top + 30;

  var e = document.createElement('div');
  e.className = id + ' summary alpha';
  navi.append(e);

  $(e).css({left: left+"px", top: top+"px"});

  setSummaryElement(p, e);

  return e
}

/**
 * show the summary panel.
 * 
 * @param p   parent (jQuery Object)
 */
function showSummaryElement(p) {
  var summary = getSummaryElement(p);

  if(!summary){
    summary = createSummaryElement(p);
  }

  $(summary).show();
}

/**
 * hide the summary panel.
 *
 * @param p   parent (jQuery Object)
 */
function hideSummaryElement(p) {
  $(getSummaryElement(p)).hide();
}

function hoverSummary(event) {
  showSummaryElement($(this));
}

function removeSummary(event) {
  hideSummaryElement($(this));
}

function searchFocus(){
  if($(this).val() == "Search"){
    $(this).val("");
    $(this).css("color", "#333333");
  }
}

function searchBlur(){
  if($(this).val() == "Search" || $(this).val() == ""){
    $(this).val("Search");
    $(this).css("color", "#333333");
  }
}