Custom POPUP Custom Infowindow?

[chriseaddy]

I am trying to customize the pop up or info window .The current pop up I have is fine except I cannot display the Html in the way I wish. I would like it to have a layout similar to this. I tried to use the infowindow.setcontent(myDiv) but lost the ability to use my clusterlayer. Any help would be fantastic,  I like the functionality of the popup and if this could be done with what I have that is the best option for me.

what this does is it places a bunch of cluster markers on my map and when I click on a  clustermarker it brings up the pop up. It works perfect! just cant figure out how to make the popup look the way I want.

 <script>

        var map;
        require([
            "dojo/parser",
            "dojo/ready",
            "dojo/_base/array",
            "esri/Color",
            "dojo/dom-style",
            "dojo/query",

            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/request",
            "esri/graphic",
            "esri/geometry/Extent",

            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/ClassBreaksRenderer",

            "esri/layers/GraphicsLayer",
            "esri/SpatialReference",
            "esri/dijit/PopupTemplate",
            "esri/geometry/Point",
            "esri/geometry/webMercatorUtils",

            "extras/ClusterLayer",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (
            parser, ready, arrayUtils, Color, domStyle, query,
            Map,DynamicLayer, esriRequest, Graphic, Extent,
            SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
            GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
            ClusterLayer
        ) {
                ready(function () {
                    parser.parse();

                    var clusterLayer;
                    var popupOptions = {
                        "markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
                        "marginLeft": "20",
                        "marginTop": "20"
                    };
                    //map = new Map("map", {
                    //    basemap: "streets",
                    //    center: [- 86.322125, 32.367302],
                    //    zoom: 7
                    //});

                    map = new Map("map", {
                        basemap: "streets",
                        center: [- 86.322125, 32.367302],
                        zoom: 7
                    });

                    //var baseLayer = new DynamicLayer("");
                    //map.addLayer(baseLayer);

                    map.on("load", function () {
                        // hide the popup's ZoomTo link as it doesn't make sense for cluster features
                        domStyle.set(query("a.action.zoomTo")[0], "display", "none");
                        addClusters();
                    });

                    function addClusters() {

                        var model = @Html.Raw(Json.Serialize(Model.Signs));

                        var signInfo = {};
                        var wgs = new SpatialReference({
                            "wkid": 4326
                        });

                        signInfo.data = arrayUtils.map(model, function (p) {
                            var latlng = new Point(parseFloat(p.longitude), parseFloat(p.latitude), wgs);
                            var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
                            var attributes = {
                                "PermitNumber": p.permitNumber,
                                "StructureId": p.structureId,
                                "Classification": p.classification                              
                            };
                            return {
                                "x": webMercator.x,
                                "y": webMercator.y,
                                "attributes": attributes
                            };
                        });

                        // popupTemplate to work with attributes specific to this dataset
                        var popupTemplate = new PopupTemplate({
                            "title": "",
                            "fieldInfos": [
                                {
                                    "fieldName": "PermitNumber",
                                    visible: true
                                },
                                {
                                    "fieldName": "StructureId",
                                    visible: true
                                },
                                {
                                    "fieldName": "Classification",
                                    visible: true
                                }
                            ]
                        });

                        clusterLayer = new ClusterLayer({
                            "data": signInfo.data,
                            "distance": 75,
                            "id": "clusters",
                            "labelColor": "#fff",
                            "labelOffset": 10,
                            "resolution": map.extent.getWidth() / map.width,
                            "singleColor": "#888",
                            "singleTemplate": popupTemplate
                        });

                        var defaultSym = new SimpleMarkerSymbol().setSize(4);
                        var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");

                        var picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";
                        var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
                        var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
                        var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
                        renderer.addBreak(0, 2, blue);
                        renderer.addBreak(2, 200, green);
                        renderer.addBreak(200, 1001, red);
                       
                        clusterLayer.setRenderer(renderer);

                        map.addLayer(clusterLayer);

                        // close the info window when the map is clicked
                        map.on("click", cleanUp);
                        // close the info window when esc is pressed
                        map.on("key-down", function (e) {
                            if (e.keyCode === 27) {
                                cleanUp();
                            }
                        });
                    }

                    function cleanUp() {
                        map.infoWindow.hide();
                        clusterLayer.clearSingles();
                    }

                    function error(err) {
                        console.log("something failed: ", err);
                    }

                    // show cluster extents...
                    // never called directly but useful from the console
                    window.showExtents = function () {
                        var extents = map.getLayer("clusterExtents");
                        if (extents) {
                            map.removeLayer(extents);
                        }
                        extents = new GraphicsLayer({ id: "clusterExtents" });
                        var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));

                        arrayUtils.forEach(clusterLayer._clusters, function (c, idx) {
                            var e = c.attributes.extent;
                            extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
                        }, this);
                        map.addLayer(extents, 0);
                    };
                });
            });
    </script>
}