//debugging
function debug() {
    document.writeln('<div id="debug"></div>');
}

function print(message) {
    document.getElementById('debug').innerHTML += message + '<br />';
}

//Widget Settings
var wrapper_div_html = '<div id="dailyapple-search-widget"></div>';


var image_src = "http://www.mydailyapple.com/images/dailyapple-external-search.gif"; // URL for the initial image to display

var width = 145;  //in pixels - should match the width of the image
var height = 87; //ditto

var expanding_border_width = 2; //in pixels
var expanding_border_color = 'gray'; // or '#rrggbb';
var expanding_background_color = 'white'; // or '#rrggbb';

//Effect settings
var effect_duration = 210;  //how long, in milliseconds, should the expansion / contraction last?
var effect_steps = 7;      //how many increments should the expansion / contraction effect use?

var target_width = 400;
var target_height = 180;

//Functions for implementing the effect
function get_pixel_width(el) {
    return parseInt(el.style.width, 10);
}

function get_pixel_height(el) {
    return parseInt(el.style.height, 10);
}

function set_pixel_width(el, width) {
    el.style.width = width + 'px';
}

function set_pixel_height(el, height) {
    el.style.height = height + 'px';
}

function get_absolute_position(el) {
    var current_top = 0;
    var current_left = 0;
    if (el.offsetParent) {
        current_left = el.offsetLeft;
	current_top = el.offsetTop;

	while (el = el.offsetParent) {
	    current_left += el.offsetLeft;
	    current_top += el.offsetTop;
        }
    }
    
    return {top: current_top, left: current_left};
}

function set_absolute_position(el, position, done_callback) {
    el.style.position = 'absolute';
    el.style.top = position.top + 'px';
    el.style.left = position.left + 'px';
    el.style['z-index'] = 1000;
    if(done_callback) done_callback();
}

function set_static_position(el, done_callback) {
    el.style.position = 'static';
    if(done_callback) done_callback();
}

function change_dim_to(el, w, h, done_callback) {

    var orig_width_diff = w - get_pixel_width(el);	
    var orig_height_diff = h - get_pixel_height(el);

    var width_incr = Math.round(orig_width_diff / effect_steps );
    var height_incr = Math.round(orig_height_diff / effect_steps );
								   								   
    var incr = function() {
	var current_width_diff = w - get_pixel_width(el);
	var current_height_diff = h - get_pixel_height(el);

	var done = true;

	if(Math.abs(width_incr) > Math.abs(current_width_diff)) width_incr = current_width_diff;

	if(Math.abs(height_incr) > Math.abs(current_height_diff)) height_incr = current_height_diff;

	if(current_width_diff != 0) {
	    done = false;
	    set_pixel_width(el, get_pixel_width(el) + width_incr);	   
	}
	if(current_height_diff != 0) {
	    done = false;
	    set_pixel_height(el, get_pixel_height(el) + height_incr);
	}
	if(!done) {
	    setTimeout(incr, Math.round( effect_duration / effect_steps ));
	}
	else {
	  if(done_callback) done_callback();
	}
    };

    incr();
								   
}

//Functions defining the effect behaviour
function swap_to_search(widget, html, cancel_callback) {
    widget.innerHTML = html

    var ta = document.getElementById('dailyapple-external-search-textarea');
    ta.innerHTML = 'Ask your question using as many words as you like...';
    ta.onfocus = function() { ta.innerHTML = ''; ta.onfocus = null; };

    var cb = document.getElementById('dailyapple-external-search-cancel-button');
    cb.style.display = 'block';
    cb.onclick = cancel_callback;
}

function swap_to_border(widget, border_width, border_color) {
    widget.onclick = null;
    widget.innerHTML = '<div style="width: 100%; height: 100%; margin: 0px; padding: 0px; border: ' + border_width + 'px' + ' solid ' + border_color + '; background-color: ' + expanding_background_color + ';">&nbsp;</div>';
}

function swap_to_image(widget, image, click_behaviour) {
    var cb = document.getElementById('dailyapple-external-search-cancel-button');
    if(cb) cb.style.display = 'none';

    change_dim_to(widget, width, height, 
      function() {
        widget.innerHTML = '<a href="http://www.mydailyapple.com/"><img style="border: none;" id="search-widget-image" src="' + image.src + '" /></a>';
        widget.onclick = click_behaviour;
      } 
    );
}


//HTML and style for the search view
var css = "#dailyapple-external-search {\n  margin: 0px;\n  padding: 0px;\n  border: 2px solid gray;\n  background-color: #3E71A4;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n#dailyapple-external-search div {\n  color: white;\n  background-color: #3E71A4;\n}\n\n#dailyapple-external-search div.heading {\n  padding: 4px;\n}\n\n#dailyapple-external-search div.heading span.highlighted {\n  color: #FFCC66;\n  font-size: 14pt;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper {\n  margin: 0px;\n  padding: 4px;\n  border: none;\n  text-align: right;\n}\n\n\n\n\n#dailyapple-external-search { \n  height: 100%;\n}\n\n#dailyapple-external-search-cancel-button {\n  margin: 0px;\n  padding: 2px;\n  display: block;\n  float: right;\n  font-size: 10pt;\n  color: #FFCC66;\n  text-decoration: none;\n  border: 1px solid #FFCC66;\n}\n\n\n\n#dailyapple-external-search textarea {\n  margin: 0px;\n  padding: 0px;\n  margin-bottom: 4px;\n  border: 1px solid #0E4071;\n  width: 100%;\n  height: 80px;\n  overflow: auto;\n}\n\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.search-and-tips {\n  margin: 0px;\n  padding: 4px;\n  text-align: right;\n  float: right;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.search-and-tips button {\n  margin: 0px;\n  padding: 0px;\n  border: none;\n  min-height: 18px;\n  font-size: 11pt;\n  background-image: url(http://www.mydailyapple.com/images/external-search-button-background.gif);\n  background-repeat: repeat-x;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.search-and-tips div.tips {\n  padding-top: 4px;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.search-and-tips a {\n  color: #FFCC66;\n  text-decoration: none;\n  font-size: 10pt;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.search-and-tips tips a:hover {\n  text-decoration: underline;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.powered-by {\n  margin: 0px;\n  padding: 4px;\n  font-size: 11pt;\n  text-align: left;\n  float: left;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.powered-by a {\n  color: white;\n  text-decoration: none;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.powered-by a:hover {\n  text-decoration: underline;\n}\n\n#dailyapple-external-search fieldset.dailyapple-external-search-input-wrapper div.powered-by span.dailyapple {\n  color: #FFCC66;\n}\n \n#dailyapple-external-search div.clearing {\n  clear: both;\n}";
var search_html = "<form action=\"http://www.mydailyapple.com/ask/search\" target=\"_top\" method=\"post\" id=\"dailyapple-external-search\">\n  <input id=\"brrows\" name=\"brrows\" type=\"hidden\" value=\"4\" />\n  <input type=\"hidden\" name=\"partner_key\" value=\"6ouxoe0o1toamleph8as\" />\n  <div class=\"heading\">\n   <a href=\"\" id=\"dailyapple-external-search-cancel-button\">cancel</a> \n    <span class=\"highlighted\">&gt;&gt; Evidence based</span> answers to real medical questions:\n  </div>\n  <fieldset class=\"dailyapple-external-search-input-wrapper\">\n    <!-- Fieldset required to get textarea at 100% to behave nicely in IE -->\n    <textarea name=\"search_text\" id=\"dailyapple-external-search-textarea\" onkeypress=\"return function (event) { var code; if (!event) var event = window.event; if (event.keyCode) code = event.keyCode; else if (event.which) code = event.which; if(code == 13 /* return */) { document.getElementById('dailyapple-external-search').submit(); return false; } return true; }(event);\"></textarea>\n    <div>\n	    <div class=\"powered-by\" >\n		  Search powered by\n		  <br />\n		  <a href=\"http://www.mydailyapple.com/\"><span class=\"dailyapple\">MyDailyApple</span></a>\n	    </div>\n		<div class=\"search-and-tips\">\n			<button type=\"submit\">Search</button>\n			<div class=\"tips\">\n			  <a href=\"http://www.mydailyapple.com/about/us\" onclick=\"return !window.open(this.href, '', 'width=800,height=700,scrollbars');\" class=\"tips\">Search tips</a>\n			</div>\n      	</div>\n      	<div class=\"clearing\"> </div>\n    </div>\n  </fieldset>\n</form>\n\n";

//Insert the style
document.write('<style>' + css + '</style>');

//Insert the wrapper DIV for the widget
document.write(wrapper_div_html);

var widget = document.getElementById('dailyapple-search-widget');
set_pixel_width(widget, width);
set_pixel_height(widget, height);

var image = new Image();
image.src = image_src;

//and the initial view and behaviour
var image_click_behaviour = function() {

    set_absolute_position(widget, get_absolute_position(widget));

    swap_to_border(widget, expanding_border_width, expanding_border_color);

    change_dim_to(widget, target_width, target_height, function() {

      //after expansion
      swap_to_search(widget, search_html, function() { 
        //what to do when clicking cancel
        swap_to_border(widget, expanding_border_width, expanding_border_color);
        change_dim_to(widget, width, height, function() {
          //after contraction
          swap_to_image(widget, image, image_click_behaviour);
	  set_static_position(widget);
	});
	return false;
      });
    
    });

    return false;
};

swap_to_image(widget, image, image_click_behaviour);