EQ2 Raid Progression v1.1

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
 color:#dddddd;
 background:#222222;
 border: 1px solid #333333;
 padding:5px;
 display:none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

<style type="text/css">
/* Progression box */
#progBox { color:#ffffff; text-align:center; padding:4px; }

/* Instance name text */
.instance { color:#cccccc; font-size:.8em; }

/* Instance image and image cell */
.instanceImgCell { width:30px; }
.instance img { vertical-align: middle; border:0px; }

/* bosses killed "(5/6)" in the progression box */
.bossCount { color:#cccccc; vertical-align:middle; }

/* Tooltip styles */
.tooltipHeader { color:#0080ff; font-weight:bold; vertical-align:top; }
.killedBoss { color:#888888; text-decoration:line-through; }
.toKillBoss { color:#dddddd; text-decoration:none; }
.killedText { color:#ff0000; }

.hide { display: none; }
.show { display: inline; }
</style>
<div style="text-align:center">
<!-- Expansion Selector -->
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2Rok.png" title="Rise of Kunark" onclick="pickExp(eq2RoK);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2SF.png" title="Sentinel's Fate" onclick="pickExp(eq2SF);">

<div id="progBox"></div>
</div>

< script type="text/javascript">
var eq2RoK = [],
    eq2SF  = [];

var tooltipWidth = 300;
var tooltipStatusWidth = 95;
var iconHeight = 30;

// Text in progression box and tooltip, see CSS for color
var raidingKeyWord = "No|cleared|closed";
var bossKilledKeyWord = "Killed|Dead";

// Setting this to true will show ALL rows, even if you have never been there
// setting it to false will hide rows that match the "raidingKeyWord"
var showAllRows = true;

// Default displayed progression
var defaultEQ2 = eq2SF;

/*
 Boss Information
 ********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"]
   ,["Instance Name", "Instance Status"]
   ,["Instance Boss #1", "Boss #1 Status"]
   ,["Instance Boss #2", "Boss #2 Status"]
   ,   ...
   ,["Last Instance Boss", "Last Boss Status"]
   ]);
 ******************************************** */

/* ********************************************
   Rise of Kunark
   ******************************************** */
// WARD OF ELEMENTS                
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/woe.jpg"]                   
,["Ward of Elements", ""]                   
,["Imperator Ignus", ""]                   
,["Gelidus Ventus", ""]                   
,["Khost Alur", ""]                   
,["Digg", ""]                   
,["Dayakara", ""]                   
,["Benach Aglebar", ""]                   
,["Captain Grush", ""]      
,["Aiden", ""]                
]);   
 
// KURN'S TOWER                 
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/kurns.jpg"]                   
,["Kurn's Tower", ""]                   
,["Haggle Baron Klok", ""]                   
,["Sir Rouland", ""]                   
,["Ilenee's Despair", ""]                   
,["Ione the Lifebringer", ""]                                  
]);   

// THE TOMB OF THUUGA
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ToT.png"]
,["The Tomb of Thuuga", ""]
,["Tairiza the Window Mistress", ""]
]);

// The EXECUTION THRONE ROOM
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ETR.png"]
,["The Execution Throne Room", ""]
,["Pawbuster", ""]
]);

// THE PROTECTOR'S REALM
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PR.png"]
,["The Protector's Realm", ""]
,["Adkar Vyx", ""]
,["Iztapa Vyx", ""]
,["Wymbulu Vyx", ""]
,["Zykluk Vyx", ""]
,["Doomcoil", ""]
,["Ludmila Kystov", ""]
,["Imzok's Revenge", ""]
]);

// THE TEMPLE OF KOR-SHA
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ToKS.png"]
,["The Temple of Kor-Sha", ""]
,["Uzdrak the Invincible", ""]
,["Atrebe's Statue", ""]
,["Kodux & Zarda", ""]
,["Selrach Di'Zok", ""]
]);

// VENRIL SATHIR'S LAIR
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VenrilSathir.png"]
,["Venril Sathir's Lair", ""]
,["Venril Sathir", ""]
]);

// THE CHAMBER OF DESTINY
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/CoD.png"]
,["The Chamber of Destiny", ""]
,["The Leviathan", ""]
]);

// VEESHAN'S PEAK
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Veeshan.png"]
,["Veeshan's Peak", ""]
,["Kluzen the Protector", ""]
,["Elder Ekron", ""]
,["Nexona", ""]
,["Druushk", ""]
,["Taskmaster Nichok", ""]
,["Miyex Vioren", ""]
,["Qunard Ashenclaw", ""]
,["Xygoz", ""]
,["Hoshkar", ""]
,["Travenro the Skygazer", ""]
,["Silverwing", ""]
,["Phara Dar", ""]
]);

// TRAKANON'S LAIR
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TrakLair.png"]
,["Trakanon's Lair", ""]
,["Trakanon", ""]
]);

// SHARD OF HATE
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SoH.png"]
,["Shard of Hate", ""]
,["Dreadlord D'Somni", ""]
,["Demetrius Crane", ""]
,["Master P'Tasa", ""]
,["Malevolence & Ire", ""]
,["Kpul D'Vngur", ""]
,["Byzola", ""]
]);

// TOMB OF THE MAD CRUSADER
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TotMC.png"]
,["Tomb of the Mad Crusader", ""]
,["Captain Ikalus", ""]
,["Senior Loyalist Tilas", ""]
,["Thet-Em-Aua", ""]
,["Xebnok the Wretched", ""]
,["Gynok Moltor ", ""]
]);

// PALACE OF THE ANCIENT ONE
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PotAO.png"]
,["Palace of the Ancient One", ""]
,["Xythus Davian & Aransta", ""]
,["Switchmaster Zaxlyz", ""]
,["Absatalius", ""]
,["Tythus Tinzok", ""]
,["Pentacylpse & Ultaclypse", ""]
,["Mynzak", ""]
,["Anashti Sul", ""]
]);

// YKESHA'S INNER STRONGHOLD
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Ykesha.png"]
,["Ykesha's Inner Stronghold", ""]
,["The Strange Stalker", ""]
,["Kultak the Cruel", ""]
,["Tyrannus the Dark", ""]
,["Field General Uktap", ""]
,["Ykesha", ""]
]);

// ZARAKON'S ABYSSAL CHAMBER
eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Zarakon.png"]
,["Zarakon's Abyssal Chamber", ""]
,["Zarrakon", ""]
]);

// MUNZOK'S MATERIAL BASTION                 
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/munzoks.jpg"]                   
,["Munzok's Material Bastion", ""]                   
,["Iztak, Nynzok, Omzuk, Rwnzak", ""]     
,["Yzlak", ""]       
,["Ozyk", ""]       
,["Umzok", ""]       
,["Gozak", ""]       
,["Munzok", ""]                     
]);         
   
// MIRAGUL'S PLANAR SHARD             
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/miragul.jpg"]                   
,["Miragul's Planar Shard", ""]                   
,["Kervis Pendleir", ""]     
,["Haladan Moonrunner (Easy)", ""]       
,["Glaciactus", ""]      
,["Xaxia Viralus", ""]      
,["Qxectus Qxectus", ""]       
,["Miragul (Easy)", ""]    
,["Haladan Moonrunner (Hard)", ""]           
,["Miragul (Hard)", ""]                  
]);

/* ********************************************
   Sentinel's Fate
   ******************************************** */
// Lair of the Dragon Queen
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Toxxulia1.jpg"]
,["Lair of the Dragon Queen", ""]
,["Wyvernlord Tuluun", ""]
,["Wyrmlord Zaos", ""]
,["Vulaan", ""]
,["Toxxulia(hard)", ""]
]);

// Perah'Celsis Abominable Laboratory
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Waansu1.jpg"]
,["Perah'Celsis Abominable Laboratory", ""]
,["Ernax Heridion", ""]
,["Vernox the Insatiable", ""]
,["Sara Greenheart", ""]
,["The Scavanator", ""]
,["Haraakat the Seer", ""]
,["Xilaxis The Explorer(easy)", ""]
,["Perah'Celsis(easy)", ""]
,["Arkatanthis the Destroyer(hard)", ""]
,["Waansu(hard)", ""]
]);

// The Palace of Roehn Theer
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PoRT1.jpg"]
,["The Palace of Roehn Theer", ""]
,["Lieutenant Buldoral", ""]
,["Azara the Seer", ""]
,["Penda Parmare(easy)", ""]
,["Kendis Parmare(easy)", ""]
,["Penda & Kendis United(hard)", ""]
,["Maalus Shadowfyre(easy)", ""]
,["Maalus Shadowfyre(hard)", ""]
,["The Three Sages(easy)", ""]
,["The Three Sages(hard)", ""]
,["Roehn Theer(easy)", ""]
,["Roehn Theer(medium)", ""]
,["Roehn Theer(hard)", ""]
,["Roehn Theer(very hard)", ""]
]);

// The Vigilant: Final Destruction
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Vigilant1.jpg"]
,["The Vigilant: Final Destruction", ""]
,["Thanaraax", ""]
,["Cadducian, Raanum, and Tartan", ""]
,["Melagrognan", ""]
,["High Marus Alaric", ""]
,["Kratulus", ""]
,["Kage-Konn Prime Zoz", ""]
,["Trajin Cedon", ""]
,["Prime Trajin Ghis", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickExp(defaultEQ2);
function pickExp(ex) {
 var pb = "<center><table class=progBox border=0 width='100%'><tbody>";
 for (var inst=0; inst < ex.length; inst++) {
  var killed = 0;
  if (ex[inst][0]=='<hr>'){pb+='<tr><td colspan=3><hr></td></tr>';inst++;}
  var sN = ex[inst][1][0].replace(/\(/g,'&#40;');
  var sNL = (sN.match('&#40')) ? sN.indexOf('&#40')-1 : sN.length;
  var shortName = sN.substring(0,sNL);
  pb += '<tr class="tooltip';
   if (!showAllRows && (ex[inst][1][1].match(raidingKeyWord) || (ex[inst][1][1] == '' && ex[inst][2][1] == ''))) pb += ' hide';
  pb += '" title="<table><tr><td class=tooltipHeader width=' + tooltipWidth + '>';
  pb += ex[inst][1][0].replace(/\"/g,'&quot;') + '</td><td nowrap>' + ex[inst][1][1].replace(/\"/g,'&quot;') + '</td></tr>';
  for (var boss=2; boss < (ex[inst].length); boss++) {
   if (ex[inst][boss][1].match(bossKilledKeyWord)) {
    pb += '<tr><td class=killedBoss>' + ex[inst][boss][0].replace(/\"/g,'&quot;') + '</td><td class=killedText ';
    killed ++;
   } else {
    pb += '<tr><td class=toKillBoss>' + ex[inst][boss][0].replace(/\"/g,'&quot;') + '</td><td ';
   }
  pb += 'width=' + tooltipStatusWidth + '>' + ex[inst][boss][1] + '</td></tr>';
  }
  pb += '</table>" rel="' + tooltipWidth + '"><td class="instanceImgCell"><img src="';
  pb += ex[inst][0] + '" height="' + iconHeight + '"';
  pb += '></td><td class="instance">' + shortName + '</td><td class=bossCount>(' + killed;
  pb += '/' + (ex[inst].length-2);
  pb += ')</td></tr>';
 }
 pb += '</table>';
 $('#progBox').html(pb);
}
</script>

• "#progBox" defines the progression box style and font size.
• ".instance" defines the dungeon name color & style.
• ".instanceImgCell" defines the size of the cell that contains the dungeon image (only change if you're using a different image).
• ".instance img" defines the styling of the dungeon image.
• ".bossCount" defines the text color and alignment of the bosses killed count "(5/6)".
• ".tooltipHeader" defines the style and color of the tooltip title.
• ".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
• ".toKillBoss" defines the boss name style when it hasn't been killed.
• ".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.

• The tooltip width is set using "tooltipWidth". Default is 300 pixels.
• Inside the tooltip on the right side is the dungeon & boss status column. The with of this is set using "tooltipStatusWidth" and is set to a default of 95 pixels to fit the "(in progress)" status.
• The dungeon (instance) icon size is set by only it's icon height. The icon height is set by "iconHeight" and is set to a default of 30 pixels.
• Style for an dungeon being raided (raidingKeyWord):
  The script looks for this keyword in the instance status. You can add more than one keyword using a "|" separator (Shift-\). The script will hide that instance row if:
  
  1. The keyword is in the dungeon status, or
  2. If both the dungeon status and the first boss status are blank.
• Style for a killed boss (bossKilledKeyWord):
  The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". The keyword is case sensitive.
• Show all rows (showAllRows):
  If set to true, the script will show all instance rows regardless of what is in the status. If set to false, it will hide rows where the instance status keyword is found.
• Default display (defaultEQ2):
  The script will display this expansion group by default. It is currently set to "eq2RoK" to show Rise of Kunark bosses, but the expansion selector is commented out and will be until more expansions are added to this script.

• Change your instance and boss status as desired (in orange). The script is set up as follows:

eq2RoK.push ([
 ["Thumbnail Image URL"]
,["Instance Name", "Instance Status"]
,["Instance Boss #1", "Boss #1 Status"]
,["Instance Boss #2", "Boss #2 Status"]

,["Last Instance Boss", "Last Boss Status"]
]);

table, th, td { font-size:1em !important; }

1. You can just make the entire left column wider
   
   Control Panel > Site Pages > Manage Pages > Click on "Options / Delete" on Home page
   
   Now increase the Left Pane Width from 175px to something like 200px, then save
   
   
2. You can modify the CSS definitions to over-ride the other one, but even at 0.8em the dungeons names are pushed into three lines... I made these changes and everything was tiny (but still on 3 lines o.O).. the stuff I changed/added is in red.
   
   In the CSS
   

   .instance { color:#8a672d; font-size:.8em !important; }
   .instanceImgCell { width:20px; }
   .bossCount { color:#cccccc; vertical-align:middle; font-size:.8em !important; }
   

   In the javascript
   

   var iconHeight = 20;