//SETTING UP OUR POPUP  
 //0 means disabled; 1 means enabled;  
var popupStatus = 0;  

//loading popup with jQuery magic!
function loadPopup(lookupID){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupVideo").fadeIn("slow");

// load video content
var lookupDiv = "#" + lookupID;
var vidCode = $(lookupDiv).html();
$("#videoContent").html(vidCode);


popupStatus = 1;
}
}


//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupVideo").fadeOut("slow");
popupStatus = 0;
}
}


//centering popup
function centerPopup(){
$("#popupVideo").centerScreen();


$("#backgroundPopup").css({
"height": "100%"
});

}


 $(document).ready(function(){


//following code will be here
//LOADING POPUP
//Click the button event!
$("#vimeoButton").live("click", function(){
//centering with css
centerPopup();
//load popup
loadPopup($(this).attr("lookup"));
});

//CLOSING POPUP
//Click the x event!
$("#closePopup").live("click", function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").live("click", function(){
disablePopup();
});
//Press Escape event!
$(document).live("keypress", function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});


});


	$.fn.centerElement = function() {
        return this.each(function()
        {
			var el = this;
			$(el).remove().appendTo("body")
					.wrap("<div style='position:absolute;top:50%;left:50%;width:1px;height:1px;'></div>")
					.css({position: 'relative', left: el.offsetWidth / -2 + "px", top: el.offsetHeight / -2 + "px"});
		});
	};



$.fn.centerInClient = function(options) {
    /// <summary>Centers the selected items in the browser window. Takes into account scroll position.
    /// Ideally the selected set should only match a single element.
    /// </summary>    
    /// <param name="fn" type="Function">Optional function called when centering is complete. Passed DOM element as parameter</param>    
    /// <param name="forceAbsolute" type="Boolean">if true forces the element to be removed from the document flow 
    ///  and attached to the body element to ensure proper absolute positioning. 
    /// Be aware that this may cause ID hierachy for CSS styles to be affected.
    /// </param>
    /// <returns type="jQuery" />
    var opt = { forceAbsolute: false,
                container: window,    // selector of element to center in
                completeHandler: null
              };
    $.extend(opt, options);
   
    return this.each(function(i) {
        var el = $(this);
        var jWin = $(opt.container);
        var isWin = opt.container == window;

        // force to the top of document to ENSURE that 
        // document absolute positioning is available
        if (opt.forceAbsolute) {
            if (isWin)
                el.remove().appendTo("body");
            else
                el.remove().appendTo(jWin.get(0));
        }

        // have to make absolute
        el.css("position", "absolute");

        // height is off a bit so fudge it
        var heightFudge = isWin ? 2.0 : 1.8;

        var x = (isWin ? jWin.width() : jWin.outerWidth()) / 2 - el.outerWidth() / 2;
        var y = (isWin ? jWin.height() : jWin.outerHeight()) / heightFudge - el.outerHeight() / 2;

        el.css("left", x + jWin.scrollLeft());
        el.css("top", y + jWin.scrollTop());

        // if specified make callback and pass element
        if (opt.completeHandler)
            opt.completeHandler(this);
    });
}

$.fn.centerScreen = function(loaded) {
                var obj = this;
                if(!loaded) {
                        obj.css('top', $(window).height()/2-this.height()/2);
                        obj.css('left', $(window).width()/2-this.width()/2);
                        $(window).resize(function() { obj.centerScreen(!loaded); });
                } else {
                        obj.stop();
                        obj.animate({ top: $(window).height()/2-this.height()/2, left: $
(window).width()/2-this.width()/2}, 200, 'linear');
                }
        }