<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta content="utf-8" http-equiv="encoding"/>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
   
       <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> 
        <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> -->
        <!--<script src="ChartUI/js.common/jquery.1.8.3/jquery-1.8.3.js" type="text/javascript"></script> -->  
        <script src="../../init.demo.js" type="text/javascript"></script>
   
       <link rel="stylesheet"   type="text/css" />
        <link rel="stylesheet" href=""  type="text/css" /> 
      <style></style> 
        <style type="text/css">
          
        </style> 

    </head>
 
    <body>
    
    
    <!--Begin Content block-->
            <div style=" width: 900px;    margin: 2px auto; line-height: 20px; padding: 10px;  background:#d3d3d3 ">
            <a href="javascreipt:void(0)" onclick="changeTemplate('black')">change to black</a>  | 
            <a href="javascreipt:void(0)" onclick="changeTemplate('white')">change to white</a>  |
        </div>
        <h1 align="center">Demo Templates(style, color)</h1>
 
       <div class="prof_chart_container" id="layoutId1" ></div>
 
         
 
         <!--End content block-->
         <script type="text/javascript">

             var prochartloader = null;
             var objChartMain1 = null;
             var objChartMain2 = null;
             var objChartMain3 = null;
             var initdemo = null;


             $(document).ready(function () {

                 // init demo parameters
                 initdemo = ProChart_InitDemo();

                 // load loader for chart
                 loadScript(initdemo.loader.filepath, function () {
                     prochartloader = ProChart_Loader();
                     prochartloader.init.rootpath = initdemo.loader.rootpath;
                     prochartloader.init.loadercss.push(initdemo.gui.rootpath + '/Demo/templates/blue/template.css');
                     prochartloader.init.loadercss.push(initdemo.gui.rootpath + '/Demo/templates/black/black.css');
                     
 
                     // load all javascript in browser
                     prochartloader.LoaderInitComplete = eventLoaderComplete;
                     if (initdemo.loader.combinemode) {
                         prochartloader.LoaderInitCombine();
                     }
                     else {
                         prochartloader.LoaderInit();
                     }


                 });
             });

             ///
             function loadScript(url, callback) {

                 var script = document.createElement("script");
                 script.type = "text/javascript";

                 if (script.readyState) {  //IE
                     script.onreadystatechange = function () {
                         if (script.readyState == "loaded" ||
                             script.readyState == "complete") {
                             script.onreadystatechange = null;
                             callback();
                         }
                     };
                 } else {  //Others
                     script.onload = function () {
                         callback();
                     };
                 }

                 script.src = url;
                 document.getElementsByTagName("head")[0].appendChild(script);
             }

         </script>
         
         

        <script type="text/javascript">
 
            
             function eventLoaderComplete() {
                 //Run instances
                 runInstance1();
 
             } 
         </script>
          
         <script type="text/javascript">
             //1. Instance 1
             //-----------------------------------------------------------------------------------------------
 

             function runInstance1 () {

                 objChartMain1 = ProChart_InitLayout("#layoutId1", "layout1", "blue");

                 objChartMain1.guiinit.rootpath = initdemo.gui.rootpath;
 
                 //Add help block
         
                 objChartMain1.apiinit.localization.languages = [
                     { 'id': 'en', 'name': 'English', 'dir': 'ltr' },
                     { 'id': 'fr', 'name': 'Français', 'dir': 'ltr' },
                     { 'id': 'es', 'name': 'Español', 'dir': 'ltr' },
                     { 'id': 'he', 'name': 'עברית', 'dir': 'rtl' },
                     { 'id': 'ru', 'name': 'Русский', 'dir': 'ltr' }
                 ];
 
                 //Init  indicator  favorites
                 objChartMain1.apiinit.indicators = [
                     { 'n': 'Bollinger Bands', 'id': 'bbands', 'd': 'Bollinger Bands' },
                     { 'n': 'Donchian Channels', 'id': 'donchian', 'd': 'Donchian Channels' },
                     { 'n': 'Ichimoku Cloud', 'id': 'ichimoku', 'd': 'Ichimoku Cloud' },
                     { 'n': 'Moving Average Convergence Divergence', 'id': 'macd', 'd': 'Moving Average Convergence Divergence' },
                     { 'n': 'Relative Strength Index 2', 'id': 'rsi223', 'd': 'Relative Strength Index','custom':true },
                     { 'n': 'Simple Moving Average', 'id': 'sma', 'd': 'Simple Moving Average' }
                 ];

 
                 objChartMain1.apiinit.localization.current = "en"; //fr
 
                 objChartMain1.apiinit.majors = [ 
                     { 'name': 'USD/JPY', 'id': 'USD/JPY', 'description': 'USD/JPY' },
                     { 'name': 'USD/JPY34', 'id': 'USD/JPY', 'description': 'USD/JPY' },
                     { 'name': 'USD/JPY', 'id': 'USD/JPY', 'description': 'USD/JPY' }
                 ];

                 objChartMain1.apiinit.customLayoutFile = objChartMain1.guiinit.rootpath + "/Demo/templates/layout1a.js";
                 objChartMain1.guiinit.customJsonCssFile = objChartMain1.guiinit.rootpath + "/Demo/templates/blue/blue.chart.css.json.js";

                 objChartMain1.events.layout.readyComplete = eventlayoutReadyComplete_Instance1;
                 objChartMain1.gui.loadLayout(); //Init all innner object
                 objChartMain1.events.layout.initComplete = eventlayoutInitComplete_Instance1;
                 objChartMain1.events.chart.createComplete = eventCreateChartComplete_Instance1;
             }


             function eventlayoutReadyComplete_Instance1() {
                 objChartMain1.api.layout.set('width||height', 920 + "||" + 700);
             }



             function eventlayoutInitComplete_Instance1() {
                 console.log("Events layout");
                 objChartMain1.api.debug.level = 0;
                 objChartMain1.apiinit.chart.ShowBarData = "true";
                 objChartMain1.apiinit.chart.PriceChartType = "candlesticks";
                 objChartMain1.apiinit.chart.TimeScale = "5M";
                 //objChartMain1.chart.PriceChartType = "hollowcandlesticks";

                 objChartMain1.apiinit.Symbol = "EUR/JPY";
                 objChartMain1.apiinit.ShowCandleCloseCounter = true; 	//Show the end of candle counter

                 objChartMain1.chart.StudiesToLoad.push('ichimoku');
                 objChartMain1.chart.StudiesToLoad.push('macd');

             };


             function eventCreateChartComplete_Instance1() {

                  


                 objChartMain1.apiactions.chart.GetSymbolsByGroup({ guiparent: null, guigroup: 'majors' }, 'majors');
                 objChartMain1.apiactions.chart.GetCountries({ guiparent: null });
                 objChartMain1.apiactions.chart.GetMarkets({ guiparent: null });
                 objChartMain1.apiactions.chart.GetExchanges({ guiparent: null });
 
             }

        </script>
          
         
<script type="text/javascript">

    function changeTemplate(arg) {
        switch (arg) {
            case "black":
                objChartMain1.guiinit.customJsonCssFile = objChartMain1.guiinit.rootpath + "/Demo/templates/black/black.chart.css.json.js";
                objChartMain1.gui.changeTemplate("black");
                $('body').css('background-color', '#2D2D2D');

                break;

            case "white":
                objChartMain1.guiinit.customJsonCssFile = objChartMain1.guiinit.rootpath + "/Demo/templates/blue/blue.chart.css.json.js";
                objChartMain1.gui.changeTemplate("blue");
                $('body').css('background-color', '#FFFFFF');


                break;

            default:
        }

    }

        </script>
    
    

    </body>
</html>
