<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script language="javascript" type="text/javascript">
</script>
function bindBoxes(_selector) {
var data = new dataReader();
var _hspt = new objHospitalInfor();
data.Scr2_Obj_getHsptInfor();
_hspt.HospitalInfor = data.ArrayValue;
_hspt.init();
var _aspInput = new AspInputObj();
_aspInput.input = data.Scr2_Obj_getAspInputArray();
_aspInput.init();
_aspInput.bindEvent();
var aspTag = _aspInput.htmlTag;
var hipDrugTag = new HipDragPgTagObj();
hipDrugTag.init();
var construct = new constructsSoldPgTag();
construct.init();
var purchase = new PurchasePgTag();
purchase.init();
var imp = new ImpactSeqPgTag();
imp.init();
var tag = "";
tag += "<div><div class='ui-grid-b'>";
tag += "<div class='ui-block-a' style='border-right: 1px solid #d3d3d3; border-top: 1px solid #d3d3d3; '>";
tag += _hspt.htmlTag;
tag += "</div>";
tag += "<div class='ui-block-b' style='border-right: 1px solid #d3d3d3; border-top: 1px solid #d3d3d3;'>";
tag += aspTag;
tag += "</div>";
tag += "<div class='ui-block-c' style='border-left: 0px solid #d3d3d3; border-top: 1px solid #d3d3d3; '>";
tag += hipDrugTag.htmlTag;
tag += "</div></div>";
tag += "<div><div class='ui-grid-b'>";
tag += "<div class='ui-block-a' style='border-right: 1px solid #d3d3d3; border-top: 1px solid #d3d3d3; '>";
tag += construct.htmlTag;
tag += "</div>";
tag += "<div class='ui-block-b' style='border-right: 1px solid #d3d3d3; border-top: 1px solid #d3d3d3;'>";
tag += purchase.htmlTag;
tag += "</div>";
tag += "<div class='ui-block-c' style='border-left: 0px solid #d3d3d3; border-top: 1px solid #d3d3d3; '>";
tag += imp.htmlTag;
tag += "</div>";
tag += "</div>"; // end grid
tag += "</div>"; // end container
_selector.html(tag);
}
var HipChartObj = function () {
var _chart = {};
_chart.RenderTo = "hipChart";
_chart.title = "";
_chart.getTitle = function () {
var sub_titile1 = "Hip ASP as a Percentage of"; /// todo , get
var sub_titile2 = " DRG 470 Reimbursement"; /// todo , get
_chart.titile = sub_titile1 + sub_titile2;
return _chart.titile;
};
_chart.input = {
xAxis_categories : ["2010", "2011", "2012", "2013"]
};
_chart.getInputData = function () {
var _input = {};
_input.xAxis_categories = ["2010", "2011", "2012", "2013"]; // ["Todo", "Todo", "Todo", "Todo"]; // todo
_chart.input = _input;
return _input;
};
_chart.init = function (_renderTo) {
_chart.title = _chart.getTitle();
_chart.input = _chart.getInputData();
_chart.RenderTo = _renderTo;
};
_chart.Draw = function () {
var chart = new Highcharts.Chart({
chart : {
type : 'line',
renderTo : _chart.RenderTo
},
title : {
text : _chart.title,
x : -20 //center
},
subtitle : {
text : '',
x : -20
},
xAxis : {
categories : _chart.input.xAxis_categories
},
yAxis : [{ // Primary yAxis
labels : {
format : '{value}°C',
style : {
color : '#89A54E'
}
},
title : {
text : 'Reimbursement',
style : {
color : '#89A54E'
}
},
id : 1
}, { // Secondary yAxis
title : {
text : 'Hip ASP as Percent',
style : {
color : '#4572A7'
}
},
labels : {
format : '{value} mm',
style : {
color : '#4572A7'
},
formatter : function () {
return (this.value) * 100 + '%';
}
},
id : 2,
opposite : true
}
],
tooltip : {
valuePrefix : '$',
enabled : true,
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + '$' + this.y;
}
},
plotOptions : {
line : {
dataLabels : {
enabled : true
},
enableMouseTracking : true
}
},
legend : {
/* layout: 'Horizontal',*/
align : 'center',
verticalAlign : 'bottom',
borderWidth : 0
},
series : [{
name : 'Reimbursement',
data : [12239, 2520, 12578]
}, {
name : 'New York',
yAxis : 1,
data : [0.69, 0.20, 0.38]
}
]
});
}
return _chart;
}
var objHospitalInfor = function () {
var _ret = {};
_ret.HospitalInfor = null;
_ret.hsptInforTitle = ["HospitalName", "Addres", "City, State", "CustomerId", "ProviderId"];
_ret.setDefaultHospitalInfor = function () {
var _infor = new Array();
_infor["HospitalName"] = "Georgetown Hospital";
_infor["Addres"] = "606 606 Black River Rd Drawer 1718";
_infor["CityState"] = "Georgetown, SC";
_infor["CustomerId"] = "200710";
_infor["ProviderId"] = "420020";
_infor["Beds"] = "131";
_infor["GrossRevenue"] = "$283,921,756";
return _infor;
};
_ret.init = function () {
var _tag = "";
if (_ret.HospitalInfor == null) {
_ret.HospitalInfor = _ret.setDefaultHospitalInfor();
var hsptInfor = _ret.HospitalInfor;
for (var item in hsptInfor) {
_tag += "<p class='" + _ret.paraCss + "'><span class='" + _ret.titleCss + "'>" + item + ": " + "</span>";
_tag += "<span class='" + _ret.contentCss + "'>" + hsptInfor[item] + "</span></p>";
}
} else {
for (var i = 0; i < _ret.HospitalInfor.length; i++) {
_tag += "<p class='" + _ret.paraCss + "'><span class='" + _ret.titleCss + "'>" + _ret.hsptInforTitle[i] + ": " + "</span>";
_tag += "<span class='" + _ret.contentCss + "'>" + _ret.HospitalInfor[i] + "</span></p>";
}
}
_ret.htmlTag = _tag;
return _tag;
}
_ret.titleCss = "text-font-sansserif";
_ret.contentCss = "text-font-serif";
_ret.paraCss = "text-para-small";
_ret.htmlTag = null;
return _ret;
}
var CUST_ID_LIST = [{
id : 1,
custName : "100038, HOSPITAL 001"
}, {
id : 2,
custName : "100095, HOSPITAL 002"
}, {
id : 3,
custName : "100134, HOSPITAL 003"
}, {
id : 4,
custName : "100138, HOSPITAL 004"
}, {
id : 5,
custName : "100155, HOSPITAL 005"
}, {
id : 6,
custName : "100178, HOSPITAL 006"
}, {
id : 7,
custName : "100187, HOSPITAL 007"
}, {
id : 8,
custName : "100189, HOSPITAL 008"
}, {
id : 9,
custName : "100200, HOSPITAL 009"
}, {
id : 10,
custName : "100217, HOSPITAL 010"
}, {
id : 11,
custName : "100232, HOSPITAL 011"
}, {
id : 12,
custName : "100257, HOSPITAL 012"
}
];
var chart = null;
function BindViewDataPage() {
var _container = $("#view_data_container");
var newDiv = "<div id='veiw-Data-Page-Container'> </div>";
_container.prepend(newDiv);
PopulateTags_viewData();
}
function PopulateTags_viewData() {
_selector = $('#veiw-Data-Page-Container');
bindBoxes(_selector);
}
var AspInputObj = function () {
var _ret = {};
_ret.input = ["2010", "2011", "2012", "2013", "2014"];
_ret.inputTitle = ["2010", "2011", "2012", "2013", "2014"];
_ret.init = function () {
var asp = [];
var asp0 = "2010";
asp1 = "2011";
asp2 = "2012";
asp3 = "2013";
asp4 = "2014";
asp[0] = asp0; // todo: get the value from model
asp[1] = asp1;
asp[2] = asp2;
asp[3] = asp3;
asp[4] = asp4; // todo: get the value from model
_ret.input = asp;
_ret.htmlTag = _ret.getHtmlTag();
}; // get the init value
_ret.htmlTag = null;
_ret.getHtmlTag = function () {
var tag = "";
tag += "<div class='text-box-title'> Display Selection and ASP Input </div>";
tag += "<div> </div>";
tag += "<div style='text-aligh: left;' class='text-font-serif'> ASP Input </div>";
tag += "<div>"; // start table
tag += "<table><tr>";
tag += "<td><span class='text-lower text-font-serif'>ASP</span></td>";
for (var i = 0; i < 5; i++) {
tag += "<td><label for='" + "Asp_Input" + i.toString() + "'>" + "<span class='text-font-serif'>" + _ret.inputTitle[i] + "</span></label>";
tag += "<input type='text' class='input-text-box' id='Asp_Input" + i.toString() + "'/></td>";
}
tag += "</tr></table>";
tag += "</div>"; // end table
return tag;
};
_ret.bindEvent = function () {
var _sel = $('#Asp_Input1');
_sel.change(function () {
var val = _sel.val();
alert("changed" + val);
});
}
_ret.updateData = function () {}; // update year data
return _ret;
}
function populateChart() {
var _hipChart = new HipChartObj();
_hipChart.init("hipChart");
_hipChart.Draw();
var _aspChart = new AspChartObj()
_aspChart.init("aspChart");
_aspChart.Draw();
}
var AspChartObj = function () {
var _chart = {};
_chart.RenderTo = "testBarChart";
_chart.title = "Percentage Change of Hip ASP and DRG 470 Reimbursement Over Time";
_chart.getTitle = function () {
var sub_titile1 = "Percentage Change of Hip ASP and DRG 470 Reimbursement Over Time"; /// todo , get
var sub_titile2 = ""; /// todo , get
_chart.titile = sub_titile1 + sub_titile2;
return _chart.titile;
};
_chart.input = {
xAxis_categories : ["2010", "2011", "2012", "2013"]
};
_chart.getInputData = function () {
var _input = {};
_input.xAxis_categories = ["2010", "2011", "2012", "2013"]; // ["Todo", "Todo", "Todo", "Todo"]; // todo
_chart.input = _input;
return _input;
};
_chart.init = function (_renderTo) {
_chart.title = _chart.getTitle();
_chart.input = _chart.getInputData();
_chart.RenderTo = _renderTo;
};
_chart.Draw = function () {
var chart = new Highcharts.Chart({
chart : {
renderTo : _chart.RenderTo,
type : 'column'
},
title : {
text : _chart.title
},
xAxis : {
categories : ['2010-10', '2011-11', '2012-12', '2013-03']
},
yAxis : {
title : {
text : ' Percent',
style : {
color : '#4572A7'
}
},
labels : {
format : '{value} mm',
style : {
color : '#4572A7'
},
formatter : function () {
return (this.value) * 100 + '%';
}
},
opposite : false
},
credits : {
enabled : false
},
legend : {
/* layout: 'Horizontal',*/
align : 'center',
verticalAlign : 'bottom',
borderWidth : 0
},
series : [{
name : 'Knee ASP',
data : [0.538, 0.50, -1, 0.2]
}, {
name : 'Drug 470',
data : [3, 4, 4, -2]
}
]
});
}
return _chart;
}
var HipDragPgTagObj = function () {
var _ret = {};
_ret.input = ["-", "-"]; // get ASP and DRG value
_ret.title = "Percentage Change of Hip ASP and DRG 470 Over Time";
_ret.init = function () {
// get input from model
_ret.htmlTag = _ret.getHtmlTag();
};
_ret.htmlTag = "";
_ret.getHtmlTag = function () {
var dd1 = new selectObj();
var dd2 = new selectObj();
dd1.init();
dd2.init();
var tag = "";
tag += "<div class='text-box-title'>" + _ret.title + "</div>";
tag += "<div>"; // start table
tag += "<table class='constuct-table'>";
tag += "<tr><td style='width:70%'>" + dd1.htmlTag + "</td><td style='width:30%'>" + "<span class='text-font-serif'>ASP: </span> " + _ret.input[0] + "</td></tr>";
tag += "<tr><td style='width:70%'>" + dd2.htmlTag + "</td><td style='width:30%'>" + "<span class='text-font-serif'>DRG: </span>" + _ret.input[1] + "</td></tr>";
tag += "</table>";
tag += "</div>"; // end table
// tag += "</div>"; // end HipDragObj
return tag;
}
return _ret;
}
var selectObj = function () {
var _ret = {};
_ret.title = "Year1";
_ret.divTag = "ddl_Year1";
_ret.input = [2011, 2012, 2013];
_ret.init = function (_divTag, _title, _inputArray) {
// get input
_ret.divTag = (_divTag != "" && _divTag != null) ? _divTag : "id_undefined";
if (_title != null && _inputArray != null) {
_ret.title = _title;
_ret.input = null;
_ret.input = new Array();
for (var i = 0; i < _inputArray.length; i++) {
_ret.input[i] = _inputArray[i];
}
}
_ret.htmlTag = _ret.getHtmlTag();
// get html tag
};
_ret.htmlTag = "";
_ret.getHtmlTag = function () {
var _tag = "";
// _tag += "<div>";
_tag += "<div data-role='fieldcontain'>";
_tag += "<label for='" + _ret.divTag + "' class='dropdown-text-lower'>" + _ret.title + "</label>";
_tag += "<select id='" + _ret.divTag + "' data-inline='true' data-mini='true' data-theme='c'>";
for (var i = 0; i < _ret.input.length; i++) {
_tag += "<option value='" + util_forceString(i, "1") + "'>" + _ret.input[i] + "</option>";
}
_tag += "</select>";
_tag += "</div>";
return _tag;
};
return _ret;
}
var constructsSoldPgTag = function () {
var _ret = {};
_ret.title = "Constructs Sold";
_ret.inputData = [157, 306, 414, 0, 0];
_ret.inputType = "Hip";
_ret.inputTitle = ["2010", "2011", "2012", "2013", "2014"];
_ret.init = function () {
_ret.htmlTag = _ret.getHtmlTag();
};
_ret.htmlTag = "";
_ret.getHtmlTag = function () {
var _tag = "<div>";
_tag += "<div class='text-box-title'> <span>" + _ret.title + "</span></div>";
_tag += "<div> </div>";
_tag += "<table class='constuct-table'>";
_tag += "<tr><td> </td>"
for (var i = 0; i < _ret.inputTitle.length; i++) {
_tag += "<td>" + _ret.inputTitle[i] + "</td>";
}
_tag += "</tr>";
_tag += "<tr><td>" + _ret.inputType + "</td>";
for (var i = 0; i < _ret.inputTitle.length; i++) {
_tag += "<td>" + _ret.inputData[i] + "</td>";
}
_tag += "</tr>";
_tag += "</table>";
_tag += "</div>";
return _tag;
}
return _ret;
}
var PurchasePgTag = function () {
var _ret = {};
_ret.title = "Hospital Value-based Purchasing";
_ret.inputData2013 = ["2013", "-", "-", "-"];
_ret.inputData2014 = ["2014", "-", "-", "-"];
_ret.inputType = "Hip";
_ret.inputTitle = [" ", "Adjustment", "Rank", "Quartile"];
_ret.init = function () {
// get data;
_ret.htmlTag = _ret.getHtmlTag();
};
_ret.htmlTag = "";
_ret.getHtmlTag = function () {
var _tag = "<div>";
_tag += "<div class='text-box-title'> <span>" + _ret.title + "</span></div>";
_tag += "<table class='constuct-table'>";
_tag += "<tr>";
for (var i = 0; i < _ret.inputTitle.length; i++) {
_tag += "<td>" + _ret.inputTitle[i] + "</td>";
}
_tag += "</tr>";
_tag += "<tr>";
for (var i = 0; i < _ret.inputTitle.length; i++) {
_tag += "<td>" + _ret.inputData2013[i] + "</td>";
}
_tag += "</tr>";
_tag += "<tr>";
for (var i = 0; i < _ret.inputTitle.length; i++) {
_tag += "<td>" + _ret.inputData2014[i] + "</td>";
}
_tag += "</tr>";
_tag += "</table>";
_tag += "</div>";
return _tag;
}
return _ret;
}
var ImpactSeqPgTag = function () {
var _ret = {};
_ret.title = "Impact of Sequester";
_ret.inputClicke = true;
_ret.init = function () {
// get data;
_ret.htmlTag = _ret.getHtmlTag();
};
_ret.htmlTag = "";
_ret.getHtmlTag = function () {
var chkId = "impactSeq";
var chkbox = new objCheckbox(chkId);
var _tag = "<div>";
_tag += "<div class='text-box-title'> <span>" + _ret.title + "</span></div>";
_tag += "<div> </div>";
_tag += "<div class='box-align-center'><table class='Impact-table'>";
_tag += "<tr>";
_tag += "<td>" + chkbox.tagHtml;
_tag += "</td>" + "<td>" + "Click to Apply" + "</td>";
_tag += "</tr>";
_tag += "</table></div>";
_tag += "</div>";
return _tag;
}
return _ret;
}
var objCheckbox = function (_divTag) {
var ret = {};
var tag = "";
tag += "<fieldset data-role='controlgroup'>";
tag += "<input type='checkbox' data-theme='z' name='";
tag += util_forceString(_divTag, "") + "' id='" + util_forceString(_divTag, "") + "' data-iconpos='notext' />";
tag += "<label for='" + util_forceString(_divTag, "") + "' data='content' style='position:relative;right:-0.9em'></label>";
tag += "</fieldset>";
ret.tagHtml = tag;
ret.addObserver = function (observer) {
ret.Observers.push(observer);
};
ret.removeObserver = function (observer) {
if (ret.Observers.length > 0) {
ret.Observers.pop(observer);
}
};
ret.Observers = new Array();
return ret;
}
