// Add MODAL
function show_modal()
{
    $('body').append('<div id="modaldialogpopup"><div id="boxes"><div id="modaldialog" class="window"><table border="0" cellspacing="0" cellpadding="0" id="modal_table"><tr><td colspan="3" class="modal_table_header"><div id="modal_title"></div></td> </tr><tr><td width="5" class="modal_table_left"></td><td class="modal_content_background" valign="top"><div style="" id="modal_content"></div></td><td width="5" class="modal_table_right"></td></tr><tr><td colspan="3" bgcolor="#FFFFFF" class="modal_table_footer"></td></tr><tr><td colspan=3><div style="width:100%;text-align:right;color:white;font-weight:bold"><span id="modal_back_button"><a href="#" id="modal_back_button_href" name="modal"><img border=0 src="/images/icons/arrow_left.png"></a></span><img border=0 style="margin-right:5px 8px 0px 0px;cursor:pointer;" src="/images/icons/close.png" class="close"></div></td></table></div><div id="mask"></div></div></div>');    
}



// Javascript function to open a popup manually
// params example "'height':'500','player':'iframe','background':'ffffff'"
function modal_open_url(title_text,url,params)
{
    if (params=="")
        params = 'url:'+url+',title:'+title_text+'';
    else
        params = params+',url:'+url+',title:'+title_text+'';
   //alert(params);
   modal_popup(params);
}
function onScreen(url)
{
    modal_open_url('',url,'');
}
// Javascript function to open a popup manually, with HTML content inside.
// params example "'height':'500','player':'iframe','background':'ffffff'"
function modal_open_html(title_text,htmlContent,params)
{
   params = params+',htmlContent:'+htmlContent+',title:'+title_text+',player:html';
   modal_popup(params);    
}

// Javascript function to open a popup manually, with HTML content inside.
// params example "'height':'500','player':'iframe','background':'ffffff'"
function modal_open_div(title_text,divID,params)
{
   var htmlContent = $('#'+divID).html();
   params = params+',htmlContent:'+htmlContent+',title:'+title_text+',player:html';
   modal_popup(params);    
}

// Initiate Popup
function modal_popup(params)
{
    
    // empty content    
    $('#modal_content').html('');
    var id = $("#modaldialog"); 
    
    // Clean up parameters to meet json requirements
    var myRel = '{\"' + params + '\"}';
    myRel = myRel.replace( /\\:/g, '||colon||' );
    //myRel = myRel.replace( /\":\"/g, ':' );
    myRel = myRel.replace( /,/g, '\",\"' ); 
    myRel = myRel.replace( /:/g, '\":\"' );
    myRel = myRel.replace( /\|\|colon\|\|/g, ':' );
   
    // UNCOMMENT FOR DEBUG
    //alert(myRel);
    
    // Convert Parameters to javascript object
    var obj = jQuery.parseJSON(myRel);
  
    // Error check parameters, and set defaults
    
    // default playertype
    if ( obj.player == undefined || obj.player==null ){
        obj.player = "inject";
    }
    // default hight
    if ( obj.height == undefined ){
        obj.height = "500";
    }
    // Background for content
    if ( obj.content_background == undefined ){
        $('#modal_content').removeClass("modal_content_background");
        $('#modal_content').css("background","none");
        $('#modal_content').addClass("modal_content_background");
    }
    else
    {
        $('#modal_content').removeClass("modal_content_background");
        $('#modal_content').css("background","#"+obj.content_background);
    }
    // Check for back button
    if (obj.back_url==undefined && obj.back_title==undefined ){
        $('#modal_back_button').css("visibility","hidden");
    }
    else{
        $('#modal_back_button').css("visibility","visible");
        $('#modal_back_button_href').attr("href",obj.back_url);
        $('#modal_back_button_href').attr("title",obj.back_title);
        
    }
    
    // Height of content
    if (obj.height != "500" && obj.height!=undefined ){
        $('#modal_table').css("height",obj.height+'px');
        $('#modal_content').css("height",obj.height-50+'px')
    }
    // Width of content
    if (obj.width != "500" && obj.width!=undefined ){
        $('#modal_table').css("width",obj.width+'px');
        $('#modal_content').css("width",obj.width+'px')
    }
    
    //Set title bar
    $('#modal_title').html(obj.title);
    
    //  if iframe create iframe and add src url to it, and inject into content
    if (obj.player == "iframe"){
        $('#modal_content').html('<iframe src="'+obj.url+'" style="border:0px;height:100%;width:100%;background:none;" id="modal_iframe"></iframe>');
    }
    // Direct Input of HTML
    else if (obj.player == "html"){
        $('#modal_content').html(obj.htmlContent+'<script>modal_setup();</script>');
    }
    // Else use ajax to inject content straight.
    else{
        $.ajax({
          url: obj.url,
          success: function(data) {
            $('#modal_content').html(data+'<script>modal_setup();</script>');
          }
        });
    }
    
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    
    //transition effect        
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("slow",0.8);    

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
          
    //Set the popup window to center offset based on scroll
    $(id).css('top',  winH/2-$(id).height()/2 + $(window).scrollTop()-15);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(1000);
}

// Use this function to find all "A" tags with name="modal" and add popup tag to it.
function modal_setup()
{
    $('a[name=modal]').unbind('click');
    $('a[name=modal]').click(function(e) {
       
            //Get the A tag
            var id = $("#modaldialog"); 
            
            var title = $(this).attr('title');
             title = title.replace(/:/g,'||colon||');
            // If there is no REL params, set default parameters
            if ( $(this).attr('rel') == undefined ){
                var params = 'height:500,player:inject,url:'+$(this).attr('href')+',title:'+title+'';
            }
            else{
                var params = $(this).attr('rel')+',url:'+$(this).attr('href')+',title:'+title+'';   
            }

            //Cancel the link behavior
            e.preventDefault();
            
            // Execute POPUP window
            modal_popup(params);                
        
    });
    
    //if close button is clicked
    $('.close').unbind('click');
    $('.close').click(function (e) {      
        
            //Cancel the link behavior
            e.preventDefault();
            
            $('#mask').hide();
            $('.window').hide();
        
        
    });        
    
    $('#mask').unbind('click');
    $('#mask').click(function (e) {
        
      
            $('.window').hide();
            $(this).hide();
        
        
    });
}

// Find all modal a tags and convert them to popup links.
$(document).ready(function() {     
    show_modal();
    modal_setup();
});