/**
* @desc A thickbox like plug-in that is designed for web/text content. Part of the Codereck Javascript Suite.
*
* @copyright Ryan Zec 2007-2009, All Right Reserved
*
* @license BSD (see LICENSE file included, the generic templete can be found at http://www.opensource.org/licenses/bsd-license.php)
*/
;(function($)
{
//create the codereck scope
$.cr = $.cr || {};
$.create_fade_box = function(type, wrapper_id, title, content, options)
{
var link_id = wrapper_id + '_link';
var content_id = wrapper_id + '_content';
var url = content;
if($('#' + wrapper_id).length == 0)
{
$('body').append('
');
var html = '';
$('#' + wrapper_id).append(html);
if(type == 'ajax')
{
$('#' + link_id).addClass('cr_fade_box_ajax');
}
else if(type == 'id')
{
$('#' + link_id).attr('href', content);
}
else
{
$('#' + link_id).attr('href', wrapper_id + '_content');
url = 'manual_cr_fade_box_content';
html = '' + content + '
';
$('#' + wrapper_id).append(html);
}
var options = $.extend(options,
{
url: url
});
$('#' + link_id).fade_box(options);
}
$('#' + link_id).trigger('click');
}
//initialization of codereck tabs
$.fn.fade_box = function(options, show_content)
{
if(show_content !== false)
{
show_content = true;
}
//add code here
var fade_box = new $.cr.fade_box(this, options, show_content);
}
//codereck tab class
$.cr.fade_box = function(element, options, show_content)
{
this.element = element;
this.element_id = this.element.attr('id');
this.options = $.extend(
{
id: null,
width: 50,
height: 50,
link_attribute: 'href',
enable_fade: true,
fade_click_close: true,
fade_width: null,
fade_heigth: null,
auto_scroll: true,
corners: false,
color_class: 'black_60',
wrapping_class: null,
show_title: true,
block_ui: true
},options);
$(this.element).data($.cr.fade_box.instance_key, this);
this.setup(show_content);
}
$.each(['hide_fade', 'show_content', 'update_data', 'show_fade'], function(i, method) {
$.fn[method] = function() {
var args = arguments;
return this.each(function()
{
var instance = $(this).data($.cr.fade_box.instance_key);
instance[method].apply(instance, args);
});
}
});
$.cr.fade_box.instance_key = 'cr_fade_box_instance';
$.cr.fade_box.get_instance = function(element)
{
return $(element).data($.cr.fade_box.instance_key);
};
$.extend($.cr.fade_box.prototype, $.cr.core);
$.extend($.cr.fade_box.prototype,
{
setup: function(show_content)
{
var self = this;
//hide the fade_box content
if(!this.element.hasClass('cr_fade_box_ajax'))
{
$('#' + self.options.url).hide();
}
//declaring these variable reduce size when mining the js
self.options.id = self.options.id || self.generate_id('cr_fade_box_wrap');
var dim_class = 'cr_fade_box_dim';
var content_class = 'cr_fade_box_content';
var loading_class = 'cr_fade_box_loading';
self.options.url = self.element.attr(self.options.link_attribute);
$('body').append('');
//create required divs
$('#' + self.options.id).append('');
$('#' + self.options.id).append('');
$('#' + self.options.id + ' .' + content_class).append('');
$('#' + self.options.id).append('');
//hide all divs
$('#' + self.options.id + ' .' + loading_class).hide();
$('#' + self.options.id + ' .' + content_class).hide();
$('#' + self.options.id + ' .' + dim_class).hide();
self.set_size('cr_fade_box_loading', $('#element_width').width(), $('#element_width').height());
self.element.bind('click', function()
{
self.show_fade(show_content);
return false;
});
//setup the event to move the fade box when a window is resized
$(window).resize(function()
{
if($('#' + self.options.id + ' .' + content_class).css('display') != 'none' && $('#' + self.options.id + ' .' + content_class).css('display') != 'none')
{
self.update_position();
}
});
},
hide_select: function()
{
if($.browser.msie && parseInt($.browser.version) == 6)
{
$('select').hide();
$('#' + this.options.id + ' .cr_fade_box_content select').show();
}
},
show_select: function()
{
if($.browser.msie && parseInt($.browser.version) == 6)
{
$('select').show();
}
},
show_fade: function(show_content, load_content)
{
var self = this;
if(self.options.corners === true)
{
var top_left_class = 'top_left_' + self.options.color_class;
var top_right_class = 'top_right_' + self.options.color_class;
var bottom_left_class = 'bottom_left_' + self.options.color_class;
var bottom_right_class = 'bottom_right_' + self.options.color_class;
$('#' + self.options.id + ' .cr_fade_box_dim').addClass('no_fade');
$('#' + self.options.id + ' .cr_fade_box_dim').append('');
}
if(self.options.fade_click_close === true)
{
$('#' + self.options.id + ' .cr_fade_box_dim').bind('click', function()
{
self.hide_fade();
return false;
});
}
else
{
$('#' + self.options.id + ' .cr_fade_box_dim').unbind('click');
}
self.block_ui();
//remove all classes and add the correct on if any
$('#' + self.options.id).removeClass();
if(self.options.wrapping_class)
{
$('#' + self.options.id).addClass(self.options.wrapping_class);
}
if(show_content !== false)
{
show_content = true;
}
if(load_content !== false)
{
load_content = true;
}
self.set_fade_size();
if(self.options.enable_fade === true)
{
$('#' + self.options.id + ' .cr_fade_box_dim').css('display', 'block');
}
self.show_content(show_content, load_content);
self.hide_select();
self.disable_scroll();
},
block_ui: function()
{
if($('#' + this.options.id + ' .cr_fade_box_block_ui').length == 0 && this.options.block_ui === true)
{
$('#' + this.options.id).append('');
var document_height = parseInt($(document).height());
var document_width = parseInt($(document).width());
$('#' + this.options.id + ' .cr_fade_box_block_ui').css(
{
'height': document_height,
'width': document_width
});
}
},
free_ui: function()
{
$('#' + this.options.id + ' .cr_fade_box_block_ui').remove();
},
hide_fade: function()
{
this.free_ui();
this.enable_scroll();
this.hide_content();
$('#' + this.options.id + ' .cr_fade_box_dim').children('table').remove();
$('#' + this.options.id + ' .cr_fade_box_dim').removeClass('no_fade');
if(this.options.enable_fade === true)
{
$('#' + this.options.id + ' .cr_fade_box_dim').css('display', 'none');
}
this.show_select();
this.hide_loading();
},
set_fade_size: function()
{
if(this.options.fade_width == null || this.options.fade_height == null)
{
var document_height = parseInt($(document).height());
var document_width = parseInt($(document).width());
var window_width = parseInt($(window).width());
var window_height = parseInt($(window).height());
}
else
{
document_height = (this.options.fade_height * 2) + this.options.height;
document_width = (this.options.fade_width * 2) + this.options.width;
}
this.set_size('cr_fade_box_dim', document_width, document_height);
//this is to disable the scrolling and also does not require me to apply anything special to ie for position fixed hacks
},
set_size: function(element_name, element_width, element_height, speed)
{
//generate the correct top and left value
var content_top = parseInt((($(window).height() - element_height) / 2));
var content_left = parseInt((($(window).width() - element_width) / 2));
if($.browser.msie && parseInt($.browser.version) == 6)
{
content_top += $(window).scrollTop();
content_left += $(window).scrollLeft();
}
if(element_name === 'cr_fade_box_dim')
{
//add to account for the padding on the content box
element_height += 4;
element_width += 4;
if(this.options.corners === true)
{
/*
* This code is mainly for IE6/7 but i am doing it for all browser to keep consistent. For whatever reason, in IE6/7 i need to specfic the
* dimensions for each td middle along with the corners or the corners will not show up.
*/
$('#' + this.options.id + ' .' + element_name + ' td.middle').css(
{
height: (element_height - 30),
width: (element_width - 30)
});
}
}
$('#' + this.options.id + ' .' + element_name).css(
{
'top': content_top,
'left': content_left,
'height': element_height,
'width': element_width
});
},
load_content: function()
{
var self = this;
var id = self.options.url;
//putting this function here make sure when loading a new page in the fadebox and the old contetn does not show up for a split second
$('#' + self.options.id + ' .cr_fade_box_content .cr_content').empty();
//if(id.substring(0, 5) === 'ajax:')
if(this.element.hasClass('cr_fade_box_ajax'))
{
self.show_loading();
var url = id;
var data = {};
data = $.cr.fn.url_query_to_data(id.split('?')[1]);
data.fade_box_id = self.element_id;
$.ajax(
{
type: 'post',
url: url,
data: data,
success: function(message)
{
$('#' + self.options.id + ' .cr_fade_box_content .cr_content').html(message);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
$('#' + self.options.id + ' .cr_fade_box_content .cr_content').html('There was an error retrieving the ajax page.');
}
});
}
else
{
//$('#' + self.options.id + ' .cr_fade_box_content .cr_content').append($('#' + id).html());
//alert("$('#' + " + id + ").clone(true).appendTo('#'" + self.options.id + "' .cr_fade_box_content .cr_content');");
//$('#' + id).clone(true).appendTo('#' + self.options.id + ' .cr_fade_box_content .cr_content');
var content_clone = $('#' + id).clone(true);
$('#' + id).remove();
content_clone.appendTo('#' + self.options.id + ' .cr_fade_box_content .cr_content');
$('#' + id).removeClass();
$('#' + id).show();
}
self.update_title_bar(self.element.attr('title'));
self.set_size('cr_fade_box_content', self.options.width, self.options.height);
},
show_content: function(show_content, load_content)
{
if(load_content === true)
{
this.load_content();
}
if(show_content !== true)
{
this.show_loading();
}
else
{
$('#' + this.options.id + ' .cr_fade_box_content').show();
this.hide_loading();
}
},
hide_content: function()
{
if(!this.element.hasClass('cr_fade_box_ajax'))
{
var content_clone = $('#' + this.options.url).clone(true);
$('#' + this.options.url).remove();
content_clone.appendTo('body');
$('#' + this.options.url).hide();
}
$('#' + this.options.id + ' .cr_fade_box_content').hide();
},
update_title_bar: function(title)
{
var self = this;
if(self.options.show_title === true)
{
if(title == undefined)
{
title = '';
}
var title_bar = '';
if($('#' + self.options.id + ' .cr_fade_box_title_bar'))
{
$('#' + self.options.id + ' .cr_fade_box_title_bar').remove();
}
$('#' + self.options.id + ' .cr_fade_box_content').prepend(title_bar);
$('#' + self.options.id + ' .cr_fade_box_content span.close a').bind('click', function()
{
self.hide_fade();
return false;
});
}
},
disable_scroll: function()
{
if($.browser.msie && parseInt($.browser.version) == 6)
{
$('html').css(
{
'height': '100%',
'overflow': 'hidden'
});
}
},
enable_scroll: function()
{
if($.browser.msie && parseInt($.browser.version) == 6)
{
$('html').css(
{
'height': '',
'overflow': 'auto'
});
}
},
show_loading: function()
{
this.hide_content();
$('#' + this.options.id + ' .cr_fade_box_loading').css('display', 'block');
},
hide_loading: function()
{
$('#' + this.options.id + ' .cr_fade_box_loading').css('display', 'none');
},
update_data: function(url, show_content)
{
this.options.url = url;
this.show_content(show_content, true);
},
update_position: function()
{
this.set_fade_size();
this.set_size('cr_fade_box_content', this.options.width, this.options.height);
}
});
})(jQuery);